.euiTabs {
  @include euiScrollBar;
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden; // don't scroll vertically when scrolling horizontally
  position: relative;

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

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

.euiTab {
  @include fontSize($euiTabFontSize);
  color: $euiTextColor;
  background-color: transparent;
  cursor: pointer;
  line-height: $euiLineHeight;
  padding: $euiSizeM $euiSize;
  position: relative;
  transition: color $euiAnimSpeedNormal $euiAnimSlightResistance, background-color $euiAnimSpeedNormal $euiAnimSlightResistance;

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

  &:focus {
    background-color: $euiFocusBackgroundColor;
    text-decoration: underline;
    outline-offset: -$euiFocusRingSize;

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

  &.euiTab-isDisabled {
    color: $euiColorMediumShade;

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

  &.euiTab-isSelected {
    color: $euiColorPrimary;
    cursor: default;

    &::after {
      animation: euiTab $euiAnimSpeedFast $euiAnimSlightResistance;
      background-color: $euiColorPrimary;
      bottom: 0;
      content: ' ';
      height: $euiBorderWidthThick;
      left: 0;
      position: absolute;
      width: 100%;
    }
  }

  // Small Tabs Group Modifier

  .euiTabs--small & {
    @include fontSize($euiTabFontSizeS);
    padding: $euiSizeS;
  }

  // Condensed Tabs Group Modifier

  .euiTabs--condensed & {
    font-weight: $euiFontWeightSemiBold;
    padding: $euiSizeS $euiSizeXS;

    &:focus {
      background-color: $euiFocusBackgroundColor;

      &::before {
        display: none;
      }
    }

    &-isSelected {
      text-decoration: none;
    }

    & + .euiTab {
      margin-left: $euiSize;
    }
  }

  // Expand Tabs Group Modifier

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

.euiTab__content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(0);
  transition: transform $euiAnimSpeedFast $euiAnimSlightBounce;
  white-space: nowrap;
}

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

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