@import 'variables';

.tabs-component .nav.nav-tabs {
  border: none;

  > li {
    margin-right: 24px;

    &.active > a {
      &,
      &:hover {
        color: $brand-color-4;
      }

      &:after {
        opacity: 1;
      }
    }

    > a {
      background: none;
      border: none;
      color: $text-secondary;
      font-size: $font-size-large;
      line-height: $line-height-large;
      margin: -4px 0 0 0;
      padding: 4px 8px 12px;

      &:hover {
        color: $text-primary;
      }

      // Active tab indicator
      &:after {
        border: 2px solid $brand-color-4;
        bottom: 0;
        content: "";
        left: 0;
        opacity: 0;
        position: absolute;
        transition: opacity 200ms ease-in;
        width: 100%;
      }
    }
  }
}
