.euiTabs {
  display: flex;
  border-bottom: $euiBorderThin;

  &.euiTabs--small {
    .euiTab {
      @include euiFontSizeS;
      padding: $euiSizeS $euiSizeS;
    }
  }
}

.euiTab {
  @include euiFontSize;

  position: relative;
  cursor: pointer;
  padding: $euiSizeM $euiSize;
  color: $euiColorDarkShade;
  background-color: transparent;
  transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;

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

  &:focus {
    background-color: $euiFocusBackgroundColor;
    text-decoration: underline;
  }

  &.euiTab-isDisabled {
    color: $euiColorMediumShade;

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

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

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

}



  .euiTab__content {
    display: block;
    transition: transform $euiAnimSpeedFast $euiAnimSlightBounce;
    transform: translateY(0);
  }


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