@import '../settings/variables';
@import '../tools/mixins/position';
@import '../tools/mixins/transition';
@import '../tools/mixins/breakpoints';

.c-nav-tabs {
  $this: &;
  display: flex;
  align-items: center;

  &__tab {
    @include transition((color));
    color: $color-paragraph-light;
    font-size: 0.6875em;
    line-height: 0.8125rem;
    margin: auto 1rem auto 1rem;
    position: relative;
    white-space: nowrap;
    &--title {
      line-height: 0.5em;
    }
  }

  &__tab-alternate {
    @include transition((color));
    color: $color-secondary-dark;
    font-size: 0.892em;
    font-weight: $font-weight-normal;
    line-height: 1.35em;
    margin: 0;
    position: relative;
    margin-right: 2em;

    @include media-breakpoint-up(lg) {
      margin-right: 0;
      margin-left: 2em;
    }
    :hover {
      color: $color-primary;
    }
  }

  &--main {
    #{$this}__tab {
      letter-spacing: 0.0625em;
      text-transform: uppercase;
      align-self: center;
      &:after {
        @include absolute(0, 0, -0.6em, 0);
        @include transition((border-color));
        border-bottom: 0.125rem solid transparent;
        content: '\00a0';
      }

      &--selected {
        &:after {
          border-color: $color-primary;
        }
      }

      &:hover,
      &--selected {
        color: $color-paragraph-dark;
        font-weight: $font-weight-bold;
      }
      &--disabled {
        opacity: 0.5;
        cursor: default;
        &:hover {
          color: $color-paragraph-light;
        }
      }
    }
  }

  &--secondary {
    #{$this}__tab {
      margin-left: $margin-big;
      margin-right: $margin-big;

      &:first-child {
        margin-left: 0;
      }

      &:last-child {
        margin-right: 0;
      }

      &--selected {
        font-weight: $font-weight-bold;

        &:after {
          @include absolute(0, 0, -3em, 0);
        }
      }
    }
  }

  &--bordered {
    #{$this}__tab {
      &--title {
        display: block;
        padding: $gutter-small $gutter-normal;
      }

      &--selected {
        #{$this}__tab {
          &--title {
            border: $hairline solid $color-primary;
            border-radius: 1rem;
          }
        }
      }
      &:hover,
      &--selected {
        color: $color-primary;
      }
    }
  }

  &--alternate {
    align-items: flex-start;

    #{$this}__tab {
      &-title {
        display: block;
        padding: $gutter-small 0;
      }

      &--selected {
        display: block;
        padding-bottom: $gutter-small;
        border-bottom: solid 2px #42b0d5;
      }

      &:hover,
      &--selected {
        color: $color-primary;
      }
    }
    padding: 0;
  }
  :last-of-type div {
    margin-right: 2.1em;
    @include media-breakpoint-up(md) {
      margin-right: 0;
    }
  }

  &__notification-indicator {
    font-size: 1rem;
    background-color: $color-negative;
    border-radius: 50%;
    display: inline-block;
    height: 0.375em;
    width: 0.375em;
    margin: 0 0 0.125em 0.6875em;
  }
}