//
// WYSIWYG icons
// --------------------------------------------------

// For Redmine 4.0+
#content {
  div.jstTabs.tabs {
    height: auto;

    @if $flexbox-layout {
      @media screen and (max-width: $redmine-responsive-max) {
        clear: both;
      }
    }

    > ul {
      width: 100%;
      height: auto;

      > li {
        height: auto;
        margin: 0;

        > a {
          &:hover,
          &:focus {
            border-color: darken($tab-hover-border, 3%) darken($tab-hover-border, 3%) $tab-border;
            background-color: darken($tab-hover-bg, 3%);
          }

          &.selected {
            border-color: $tab-active-border $tab-active-border $tab-active-bg;
            background: $tab-active-bg;
            color: $tab-active-text;

            &.tab-preview {
              border-bottom-color: $wiki-preview-bg;
              background-color: $wiki-preview-bg;
            }
          }
        }

        @if $flexbox-layout {
          align-self: flex-end;
        }

        &::before {
          content: none;
        }

        &.tab-elements {
          flex: 1;
          margin-left: 5px;
        }
      }
    }

    .jstElements {
      height: auto;
    }
  }

  .jstEditor {
    .wiki-preview {
      padding: $panel-body-padding;
      border: 1px solid $input-border;
      border-radius: $input-border-radius;
      background-color: $wiki-preview-bg;

      p {
        padding: 0;
      }
    }
  }
}

.jstElements {
  @extend %clearfix;
  line-height: normal;

  .box & {
    display: block;
    padding: 0;

    .jstSpacer {
      margin-right: 4px;
    }

    @media (min-width: $screen-md) {
      .jstb_help {
        margin-right: 0;
        margin-left: -6px;
        float: right;
      }
    }
  }

  button {
    margin-right: 2px;
    margin-bottom: 4px;
    box-shadow: none;
    vertical-align: top;
  }
}

.jstElements {
  %jstb-icon {
    @include fa-icon;
    padding: 0;
    border: 0;
    opacity: 1;
    background: transparent;
    background-image: none;
    color: $gray-800;

    &::before {
      text-align: center;
    }

    &:hover,
    &:focus {
      background-color: darken($tab-hover-bg, 3%);
      color: $gray-900;
    }
  }

  .jstb_strong {
    @extend %jstb-icon;

    &::before { content: $fa-var-bold; }
  }

  .jstb_em {
    @extend %jstb-icon;

    &::before { content: $fa-var-italic; }
  }

  .jstb_ins {
    @extend %jstb-icon;

    &::before { content: $fa-var-underline; }
  }

  .jstb_del {
    @extend %jstb-icon;

    &::before { content: $fa-var-strikethrough; }
  }

  .jstb_code {
    @extend %jstb-icon;

    &::before { content: $fa-var-code; }
  }

  .jstb_h1 {
    @extend %jstb-icon;

    &::before { content: $fa-var-header; }
  }

  .jstb_h2 {
    @extend %jstb-icon;

    &::before { content: $fa-var-header; font-size: .7857em; }
  }

  .jstb_h3 {
    @extend %jstb-icon;

    &::before { content: $fa-var-header; font-size: .6429em; }
  }

  .jstb_ul {
    @extend %jstb-icon;

    &::before { content: $fa-var-list-ul; }
  }

  .jstb_ol {
    @extend %jstb-icon;

    &::before { content: $fa-var-list-ol; }
  }

  .jstb_bq {
    @extend %jstb-icon;

    &::before { content: $fa-var-indent; }
  }

  .jstb_unbq {
    @extend %jstb-icon;

    &::before { content: $fa-var-outdent; }
  }

  .jstb_pre {
    @extend %jstb-icon;

    &::before { content: $fa-var-terminal; }
  }

  .jstb_link {
    @extend %jstb-icon;

    &::before { content: $fa-var-link; }
  }

  .jstb_img {
    @extend %jstb-icon;

    &::before { content: $fa-var-image; }
  }

  .jstb_cut {
    @extend %jstb-icon;

    &::before { content: $fa-var-scissors; }
  }

  .jstb_precode,
  // For plugin https://github.com/mediatainment/redmine_codebutton
  .jstb_codehighlight {
    @extend %jstb-icon;
    color: $brand-danger;

    &::before { content: $fa-var-code; }
  }

  button.jstb_help {
    @extend %jstb-icon;
    color: $link-color;

    &:hover {
      color: $link-hover-color;
    }

    &::before { content: $fa-var-question-circle; }
  }
}