/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiTabs {
  @include ouiScrollBar;
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden; // don't scroll vertically when scrolling horizontally
  position: relative;
  flex-shrink: 0; // don't ever let this shrink in height if direct descendent of flex

  // Changing height of scrollbar so it sits flush with border
  // sass-lint:disable no-vendor-prefixes
  &::-webkit-scrollbar {
    height: 3px;
  }

  &:not(.ouiTabs--condensed)::before {
    background-color: $ouiColorLightShade;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
  }
}

.ouiTab {
  @include fontSize($ouiTabFontSize);
  color: $ouiTextColor;
  background-color: transparent;
  cursor: pointer;
  line-height: $ouiLineHeight;
  padding: $ouiSizeM $ouiSize;
  position: relative;
  transition: color $ouiAnimSpeedNormal $ouiAnimSlightResistance, background-color $ouiAnimSpeedNormal $ouiAnimSlightResistance;

  &:hover:not(.ouiTab-isSelected) {
    text-decoration: underline;
  }

  &:focus {
    background-color: $ouiFocusBackgroundColor;
    text-decoration: underline;
    outline-offset: -$ouiFocusRingSize;

    &::before {
      background-color: $ouiColorLightShade;
      bottom: 0;
      content: '';
      height: 1px;
      left: 0;
      position: absolute;
      right: 0;
    }
  }

  &.ouiTab-isSelected {
    color: $ouiColorPrimary;
    cursor: default;

    &::after {
      animation: ouiTab $ouiAnimSpeedFast $ouiAnimSlightResistance;
      background-color: $ouiColorPrimary;
      bottom: 0;
      content: ' ';
      height: $ouiBorderWidthThick;
      left: 0;
      position: absolute;
      width: 100%;
    }
  }

  &.ouiTab-isDisabled {
    color: $ouiColorDisabledText;

    &:hover {
      color: $ouiColorDisabledText;
      cursor: not-allowed;
      text-decoration: none;
    }

    &::after {
      background-color: $ouiColorDisabledText;
    }
  }

  // Small Tabs Group Modifier

  .ouiTabs--small & {
    @include fontSize($ouiTabFontSizeS);
    padding: $ouiSizeS;
  }

  // Condensed Tabs Group Modifier

  .ouiTabs--condensed & {
    font-weight: $ouiFontWeightSemiBold;
    padding: $ouiSizeS $ouiSizeXS;

    &:focus {
      background-color: $ouiFocusBackgroundColor;

      &::before {
        display: none;
      }
    }

    &-isSelected {
      text-decoration: none;
    }

    & + .ouiTab {
      margin-left: $ouiSize;
    }
  }

  .ouiTabs--small.ouiTabs--condensed & {
    padding-top: ($ouiSizeM / 2);
    padding-bottom: ($ouiSizeM / 2);
  }

  .ouiTabs--large.ouiTabs--condensed & + .ouiTab {
    margin-left: $ouiSizeL;
  }

  // Expand Tabs Group Modifier

  .ouiTabs--expand & {
    flex-basis: 0%;
    flex-grow: 1;
  }
}

.ouiTab__content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(0);
  transition: transform $ouiAnimSpeedFast $ouiAnimSlightBounce;
  white-space: nowrap;
}

@keyframes ouiTab {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}