//
// Tabs
// --------------------------------------------------

$tabs-height: $line-height-computed + $tab-padding-vertical * 2 + 1px + 1px;

.tabs {
  $tabs-buttons-width: 40px;

  position: relative;
  overflow: hidden;

  @if not $flexbox-layout {
    padding-right: $tabs-buttons-width;
  }

  > ul {
    box-sizing: border-box;
    margin: 0;
    padding-left: 0;
    list-style: none;

    @if $flexbox-layout {
      display: flex;
      flex-wrap: nowrap;
      height: $tabs-height;
    } @else {
      width: 2000px;
      @extend %clearfix;
    }

    > li {
      @if $flexbox-layout {
        flex: 0 1 auto;
      } @else {
        float: left;
      }

      > a {
        display: block;
        box-sizing: border-box;
        min-width: 3em;
        height: $tabs-height;
        margin-right: 2px;
        padding: $tab-padding-vertical $tab-padding-horizontal;
        border: 1px solid transparent;
        border-radius: $border-radius-base $border-radius-base 0 0;
        text-align: center;
        white-space: nowrap;
      }
    }
  }

  .tabs-buttons {
    position: absolute;
    top: 0;
    right: 0;
    width: $tabs-buttons-width;
    border-bottom: 1px solid $tab-border;
    background-color: $body-bg;

    > button {
      width: 50%;
      height: $tabs-height - 1px;
      margin: 0;
      padding: 0;
      float: left;
      transition: opacity $transition-time;
      border: 0 none;
      border-radius: 0;
      opacity: $icon-opacity;
      background-color: $body-bg;
      background-repeat: no-repeat;
      background-position: center center;
      box-shadow: none;

      &:hover,
      &:active {
        opacity: $icon-hover-opacity;
      }

      &:active {
        background-color: $tab-hover-bg;
      }

      &.disabled {
        opacity: $icon-opacity / 2;
      }
    }

    .tab-left {
      background-image: inline-svg("chevron-left.svg", (path: (fill: $btn-default-icon-color)));
    }

    .tab-right {
      background-image: inline-svg("chevron-right.svg", (path: (fill: $btn-default-icon-color)));
    }
  }
}

div.tabs:not(#main-menu) {
  height: $tabs-height;
  margin-bottom: $line-height-computed;

  > ul {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid $tab-border;

    > li {
      margin: 0 0 -1px;
      background: transparent;

      > a {
        padding: $tab-padding-vertical $tab-padding-horizontal;
        border-color: transparent;
        background: transparent;
        color: $link-color;
        font: inherit;

        &:hover,
        &:focus {
          border-color: $tab-hover-border $tab-hover-border $tab-border;
          background-color: $tab-hover-bg;
          color: $tab-hover-text;
          text-decoration: none;
        }

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

//== Specific tabs content layout
//

#tab-content-modules fieldset p {
  margin: 3px 0 4px;
}

#tab-content-members,
#tab-content-memberships,
#tab-content-users {
  .splitcontentleft {
    width: 65%;
  }

  .splitcontentright {
    width: 35%;
  }

  fieldset {
    margin-bottom: $line-height-computed;

    legend {
      font-weight: $font-weight-bold;
    }

    label {
      @include check;
      display: block;
      margin-bottom: 3px;
    }

    label[for="principal_search"] {
      padding-left: 0;
    }
  }

  .pagination .items {
    margin-left: 0;
  }
}

#tab-content-members,
#tab-content-users {
  #principals {
    max-height: 400px;
    overflow: auto;
  }
}

#tab-content-memberships .splitcontentright select {
  width: 100%;
}

#principals_for_new_member {
  .pagination {
    float: none;
  }
}
