// Tabs (Vertical and Horizontal)
//==================================================/

@mixin tab-outline {
  border: 1px solid transparent;
  border-radius: 2px;
  bottom: 7px;
  content: '';
  left: 7px;
  position: absolute;
  right: 7px;
  top: 7px;
}

@mixin tab-outline-focus {
  border-color: $tab-selected-color;
}

@mixin tab-after-off {
  background-color: rgba($tab-hover-color, 0);
  bottom: 1px;
  content: '';
  display: block;
  height: 3px;
  position: absolute;
  width: 0;

  @include css3(transition, background-color 0.25s ease);
}

@mixin tab-after-hover {
  background-color: $tab-hover-color;
  width: 100%;
}

@mixin tab-after-selected-hover {
  background-color: $tab-selected-color;
  width: 100%;
}

.tab-container {
  font-size: 0;
  position: relative;

  &.has-placeholder {
    .tab.draggable {
      top: -12px;

      &.arrange-placeholder {
        height: 32px !important;
        top: 0;
      }
    }
  }

  &.has-add-button {
    .add-tab-button {
      visibility: visible;
    }
  }

  &.has-more-button {
    .tab-more {
      visibility: visible;

      &.is-focused svg.icon-more {
        border: 1px solid $ids-color-palette-azure-70;
      }
    }
  }

  &.is-disabled {
    .tab {
      cursor: default !important;
    }

    .icon {
      color: $disabled-color !important;
    }
  }

  > .busy-indicator-container {
    font-size: $ids-size-font-base;
  }

  .tab-list-container {
    .tab-list {
      .tab {
        &.is-focused::before {
          content: '';
          position: absolute;
          inset: 0;
          border: 1px solid $ids-color-palette-azure-70;
          pointer-events: none;
          z-index: 1;
          display: block !important;
          height: 100%;
          top: 1px;
        }
      }
    }
  }
}

.tab-list {
  list-style: none outside none;
  overflow: hidden;
}

// Styles specific to any tabs used in IDS Enterprise
// (padding/color rules are different for all tabs so they aren't in the generic class)
.tab {
  @include css3(user-select, none);

  cursor: pointer;
  display: inline-block;
  position: relative;
  text-overflow: ellipsis;

  > * {
    vertical-align: middle;
  }

  > a {
    color: inherit;
    cursor: inherit;
    display: inline-block;
    text-decoration: none;

    * {
      pointer-events: none;
    }

    span {
      color: inherit;
    }
  }

  &.is-disabled {
    cursor: default !important;

    .icon {
      color: $disabled-color !important;
    }
  }
}

// Animated Bar
.animated-bar {
  @include transition(background-color 0.25s ease, left 0.25s ease, right 0.25s ease, width 0.25s ease);

  background-color: rgba($tab-selected-color, 0); //background: transparent;
  bottom: 0;
  display: inline-block;
  height: 3px;
  left: 0;
  position: absolute;
  width: 20px;

  &.visible {
    background-color: rgba($tab-selected-color, 1);
  }
}

// Tab Focus State
// Isn't actually attached to each tab, but is a separate element that moves around
// This helps break overflow issues and simplifies the CSS
.tab-focus-indicator {
  @include tab-outline;

  pointer-events: none;
  z-index: 10;

  &.is-visible {
    @include tab-outline-focus;

    box-shadow: $focus-box-shadow;
  }
}

// Tab Body
.tab-panel {
  display: none;
  opacity: 0;
  padding-top: 20px;

  @include transition(opacity 500ms cubic-bezier(0.17, 0.04, 0.03, 0.94));

  &.can-show {
    display: block;
  }

  &.is-visible {
    opacity: 1;
  }

  &.padding {
    padding: 20px !important;
  }

  &.alternate {
    background-color: $body-color-primary-background;
    min-height: 100%;
  }

  // Change text color when disabled
  &.is-disabled {
    color: $disabled-color;

    label,
    .label {
      color: inherit;
    }

    h1,
    h2,
    h3,
    h4,
    p {
      color: inherit;
    }
  }

  // This rule fixes an IE bug where contents of all tab panels are shown.
  > .page-container {
    position: static;
  }

  > .header {
    + .page-container {
      margin-top: 0;
    }
  }
}

// Page containers that directly house '.tab-panel' elements will allow them to fill the height of the container
// Used in vertical/header/module tabs.
.page-container > .tab-panel,
.page-container > .tab-panel-container > .tab-panel {
  height: 0;
  padding-top: 30px;
  width: 0;

  @media (min-width: $breakpoint-phone-to-tablet) {
    padding-top: 0;
  }

  &.can-show {
    height: 100%;
    width: 100%;
  }

  > .busy-indicator-container {
    font-size: $ids-size-font-base;
  }
}

// Page containers without scroll
.page-container {
  .tab-panel-container {
    &.no-scroll {
      .tab-panel {
        padding-top: 0;
      }
    }
  }
}

// More Button
.tab-more,
.add-tab-button {
  @include css3(transition, background-color 0.25s ease);

  cursor: pointer;
  display: inline-block;
  position: absolute;
  visibility: hidden;

  &:focus {
    outline: none;
  }

  // Position Elements in menu
  > * {
    vertical-align: middle;
  }
}

.has-more-actions.has-more-button.has-add-button.tab-container.horizontal,
.has-more-actions.has-more-button.has-add-button.tab-container.header-tabs {
  &::after {
    right: 132px;
  }
}

.tab-container.has-counts {
  > .tab-list-container {
    .tab-list {
      padding: 1px 0 17px;

      .separator {
        margin-bottom: -6px;
      }

      .tab {
        border-bottom: 5px solid transparent;

        &:hover {
          border-bottom: 5px solid $tab-hover-color;
        }

        &.is-selected {
          border-bottom: 5px solid $tab-selected-color;
        }
      }
    }
  }
}

// Common styles between Horizontal and Header tabs
.tab-container.horizontal,
.tab-container.header-tabs {
  overflow: hidden;

  //========================================
  // Before/After control the faded edges
  //========================================
  &::after,
  &::before {
    @include transition(width 200ms $cubic-ease);

    background-color: transparent;
    content: '';
    display: inline-block;
    height: inherit;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 0;
    z-index: 20;
  }

  // Background fade on the left edge
  // Fade colors are determined by pattern/implementation (see different tab CSS files for definitions)
  &::before {
    left: 0;
  }

  // Background fade on the right edge
  // Fade colors are determined by pattern/implementation (see different tab CSS files for definitions)
  &::after {
    right: 0; // bleed into the tab list (width of this element + 1 for border) & eliminate unncessary white space
  }

  &.scrolled-left::after,
  &.scrolled-right::before {
    width: 40px;
  }

  // More Tabs
  &.has-more-button {
    &::after {
      right: 51px;
    }
  }

  // Generic "More Actions" button
  &.has-more-actions {
    &::after {
      right: 41px;
    }
  }

  // "Add tab button"
  &.has-add-button {
    &::after {
      right: 95px;
    }
  }

  // Both of the above
  &.has-more-actions.has-more-button {
    &::after {
      right: 85px;
    }
  }

  // All of the above
  .has-more-actions.has-more-button.has-add-button {
    &::after {
      right: 132px;
    }
  }

  .tab-more,
  .add-tab-button,
  .more-actions-button {
    background-color: transparent;
    font-size: $ids-size-font-base;
    padding: 16px;
    position: relative;
    vertical-align: top;

    .icon {
      height: 18px;
      margin: 0;
      vertical-align: middle;
      width: 18px;
    }
  }

  .add-tab-button {
    top: 10px;
    padding: 6px 0;
    text-align: center;
    width: 35px;
    height: 30px;

    span[aria-hidden] {
      @include font-size(20);

      left: 0;
      position: relative;
      top: 0;
    }

    svg.icon-add {
      height: 14px;
      width: 14px;
      top: 2px;
    }
  }

  .more-actions-button {
    display: inline-block;
    margin-top: 1px;
    padding: 0;
  }

  .more-text {
    display: none;
  }

  .tab-list-container {
    display: inline-block;
    overflow-x: auto; // facilitates scrolling of the tabset
    overflow-y: hidden; // prevents vertical scrolling
    position: relative;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    width: calc(100% - 51px);
  }

  .tab-list-container::-webkit-scrollbar {
    display: none;
  }

  &.has-add-button {
    .tab-list-container {
      width: calc(100% - 102px);
    }
  }

  &.has-more-actions {
    .tab-list-container {
      width: calc(100% - 92px);
    }
  }

  &.has-add-button.has-more-actions {
    .tab-list-container {
      width: calc(100% - 132px);
    }
  }

  > .tab-list-container {
    margin-bottom: -42px; // Hide the scrollbars

    > .tab-list {
      display: inline-block;
      height: inherit;
      white-space: nowrap;
    }

    .tab {
      @include css3(transition, background-color 0.25s ease);

      top: 1px;
      border-bottom: 4px solid transparent;
      border-radius: 2px 2px 0 0;
      height: inherit;
      padding: 0;

      &:not(.last-child) {
        margin-right: 10px;

        &.is-error,
        &.is-info,
        &.is-success,
        &.is-alert {
          a[role='tab'] {
            padding: 7px 18px 5px 4px;
          }
        }
      }

      &:not(.is-selected):not(.is-disabled):hover {
        border-bottom: 7px solid $tab-hover-color;
      }

      &:not(.is-disabled).is-selected {
        border-bottom: 7px solid $tab-selected-color;
      }

      &:not(.separator):hover {
        &:first-child::before,
        &:last-child::before {
          width: calc(100% - 2px);
        }
      }

      &.is-focused {
        &::after {
          @include tab-outline-focus;
        }
      }

      &.is-disabled {
        color: $disabled-color;

        &::before {
          content: none !important;
        }

        a,
        &:hover a,
        &.is-selected a {
          cursor: default;
        }
      }

      &.dismissible {
        padding-right: 10px;

        .icon {
          position: relative;

          &.close {
            height: 16px;
            margin-left: -9px;
            margin-top: 2px;
            padding-right: 0;
            right: -4px;
            top: 0;
            z-index: 10;
          }

          &.icon-error {
            height: 16px;
            right: -9px;
            top: -1px;
            width: 16px;
          }
        }
      }

      &.has-popupmenu {
        .icon {
          height: 16px;
          margin: 3px 0 0 -5px;
          position: static;
          width: 32px;
        }

        .icon-error,
        .icon-info,
        .icon-alert {
          height: 14px;
          position: relative;
          right: 26px;
          top: 0;
          width: 16px;
        }

        &.is-error {
          .icon-more.icon {
            position: relative;
            right: -13px;
          }
        }
      }

      a {
        @include antialiased();

        color: inherit;
        font-size: $ids-size-font-base;
        font-weight: $ids-number-font-weight-base;
        text-decoration: none;

        > * {
          line-height: 1.14;
        }

        span {
          color: inherit;
        }
      }

      .count {
        display: block;
        font-size: 180%;
      }

      .icon-error,
      .icon-info,
      .icon-alert,
      .icon-success {
        color: $error-icon-fill;
        height: 14px;
        position: absolute;
        right: 1px;
        width: 18px;
      }
    }

    .separator {
      @include css3(user-select, none);

      cursor: default;
      display: inline-block;
      height: 24px;
      margin: 0 12px;
      padding: 0;
      position: relative;
      vertical-align: middle;

      &::before {
        @include css3(transition, none);

        border-left: 1px solid $tab-border-color;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        width: 1px;
      }

      &::after {
        @include css3(transition, none);

        display: none;
      }

      &:hover {
        background-color: transparent;
      }

      &:hover::before {
        background-color: transparent;
      }
    }
  }

  // Entire tab control disabled state
  &.is-disabled {
    color: $disabled-color;

    label,
    .label {
      color: inherit;
    }

    h1,
    h2,
    h3,
    h4,
    p {
      color: inherit;
    }

    .tab-list {
      border-bottom-color: $disabled-color;
    }

    .tab,
    .separator {
      cursor: default;
    }

    .tab {
      color: $disabled-color !important;

      &::before {
        content: none !important;
      }

      > a,
      &:hover > a,
      &.is-selected > a,
      .count {
        color: $disabled-color !important;
        cursor: default;
      }

      .icon {
        color: $disabled-color !important;
      }
    }

    .separator {
      &::before {
        border-left-color: $input-color-disabled-border;
      }
    }

    .animated-bar {
      background-color: rgba($disabled-color, 0);

      &.visible {
        background-color: rgba($disabled-color, 1);
      }
    }
  }
}

html.theme-classic-light .tab-container.alternate.header-tabs > .tab-list-container .tab.is-disabled {
  color: $disabled-color;
}

html.theme-classic-dark .tab-container.alternate.header-tabs > .tab-list-container .tab.is-disabled {
  color: rgba($ids-color-palette-white, 0.2);
}

html.theme-classic-contrast .tab-container.alternate.header-tabs > .tab-list-container .tab.is-disabled {
  color: rgba($ids-color-palette-white, 0.4);
}

.tab-list-spillover {
  li a > .count {
    display: none;
  }
}

.popupmenu.tab-list-spillover,
.popupmenu.dropdown-tab {
  .icon {
    &.icon-error,
    &.icon-info,
    &.icon-alert {
      height: 14px;
      left: 7px;
      top: 9px;
      width: 14px;
    }
  }

  li.dismissible {
    > a {
      padding-right: 40px;

      > .icon.close {
        display: none;
        height: 14px;
        width: 26px;
        position: absolute;
        right: 5px;
        top: 2px;
        transform: translateY(50%);
      }
    }

    &.is-focused {
      > a > .icon.close {
        background-color: $popupmenu-hover-color;
        display: inline-block;
      }
    }
  }
}

// On iOS/Android, need to always show the icon so that it can be activated by touch.
.ios,
.android {
  .popupmenu.tab-list-spillover,
  .popupmenu.dropdown-tab {
    li.dismissible {
      > a {
        > .icon.close {
          display: inline-block;
          position: absolute;
        }
      }
    }
  }
}

// On Safari (specifically targeting iPad/iPhone) make the anchors pass through
// to enable easier tapping of dismissible icons (See infor-design/enterprise#4763)
.ios {
  .tab {
    > a {
      pointer-events: none;
    }

    > .icon {
      pointer-events: initial;
    }
  }
}

@import './tabs-horizontal';
@import '../tabs-vertical/tabs-vertical';
@import '../tabs-header/tabs-header';
@import '../tabs-module/tabs-module';
@import '../tabs-multi/multi-tabs';

// RTL Styles
html[dir='rtl'] {
  // More Button
  .tab-more,
  .add-tab-button {
    right: auto;
  }

  .tab-more {
    left: 0;
  }

  .tab-container.horizontal {
    &::before {
      left: auto;
      right: 0;
    }

    &::after {
      left: 41px;
      right: auto;
    }
  }

  .tab-container.header-tabs {
    &::after {
      left: 51px;
      right: auto;
    }
  }

  .tab-container.horizontal,
  .tab-container.header-tabs {
    &.has-add-button {
      &::after {
        left: 95px;
      }
    }

    &.has-more-actions {
      &::after {
        left: 85px;
      }
    }

    &.has-more-actions.has-more-button.has-add-button {
      &::after {
        left: 132px;
        right: auto;
      }
    }
  }

  .tab-container.horizontal,
  .tab-container.header-tabs {
    .tab {
      &:not(.last-child) {
        margin-left: 10px;
        margin-right: inherit;

        &.is-error {
          a[role='tab'] {
            padding: 12px 5px 12px 18px;
          }
        }
      }

      .icon-error {
        left: 0;
        right: auto;
        top: 14px;
      }
    }

    .tab-more {
      padding: 10px 11px 11px 0;

      &::before {
        left: auto;
        right: 0;
      }
    }

    .tab-list-container {
      margin-right: 1px;

      .tab {
        &.dismissible {
          padding-left: 10px;
          padding-right: auto;
        }

        &:not(.last-child) {
          margin-left: 10px;
          margin-right: auto;
        }
      }
    }

    &.has-counts {
      .tab-more {
        padding: 24px 14px 24px 4px;
      }
    }
  }

  .tab-focus-indicator {
    right: auto;
  }

  .popupmenu.tab-list-spillover li.dismissible > a > .icon.close {
    left: 15px;
    margin-right: auto;
  }
}

//Firefox and with RTL fixes
html.is-firefox {
  .tab-container {
    > .tab-list-container {
      .tab {
        .icon-error,
        .icon-info,
        .icon-alert {
          top: 12px;
        }

        &.dismissible .icon.close {
          padding-right: 0;
        }
      }
    }
  }

  &[dir='rtl'] {
    .tab-container {
      > .tab-list-container {
        .tab {
          .icon-error,
          .icon-info,
          .icon-alert {
            top: 14px;
          }

          &.dismissible .icon.close {
            right: auto;
          }
        }
      }
    }
  }
}

.tab-panel-container {
  .tab-overlay {
    position: fixed;
    display: flex;
    height: 100%;
    width: 100%;

    .overlay-right {
      flex: 1;
    }

    .overlay-left {
      flex: 1;
    }

    .has-overlay {
      background-color: rgba(230, 241, 253, 0.5); // RGBA Conversion of #E6F1FD
    }
  }
}

// Special Style introduced on SOHO-5680
.tab-container.tab-borders {
  background-color: $panel-bg-color;
  border: 1px solid $panel-border-color;
  border-bottom: 0;

  .tab-more {
    background-color: $panel-bg-color;
  }

  .tab.is-selected a {
    font-weight: $ids-number-font-weight-bold;
  }

  + .tab-panel-container {
    border: 1px solid $panel-border-color;

    // Nested Tabs
    .tab-panel-container,
    .tab-container {
      border-bottom: 0;
      border-left: 0;
      border-right: 0;
    }

    .tab-panel {
      .tab-container:first-child {
        margin-top: -21px;
      }
    }
  }

  .animated-bar {
    height: 5px;
    margin-top: -2px;
  }
}