// ============================================================================
// :: Subnav
// ============================================================================
/**
 * A component containing a list, representing the subnav of a page. It can
 * for example be used to switch between multiple styleguides.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-subnav {
  position: relative;

  border-bottom: 1px solid $bp-border-color-base;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-subnav__list {
  padding: 0;

  list-style-type: none;

  @include respond-at($bp-breakpoint-mobile-base) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}

.bp-subnav__item {
  line-height: $line-height-normalize;

  &:not(:last-child) {
    margin-right: 3rem;

    @include respond-at($bp-breakpoint-desktop-base) {
      margin-right: 5rem;
    }
  }
}

.bp-subnav__item-link {
  position: relative;

  display: block;
  padding: 0.8rem 1.2rem;
  margin-bottom: 0.4rem;

  font-size: $bp-font-size-base;
  font-weight: $bp-font-weight-bold;
  line-height: $line-height-normalize;
  letter-spacing: 0.05rem;
  text-decoration: none;

  color: $bp-text-color-base;

  transition: color 0.3s ease-in-out;

  @include respond-at($bp-breakpoint-mobile-base) {
    padding: 0 0 1.2rem 0;
    margin-bottom: 0;
  }

  &::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 0.2rem;
    height: 100%;

    background-color: $bp-background-color-dark;

    transform: scaleY(0);
    transform-origin: center;

    transition: transform 0.3s ease-in-out;

    @include respond-at($bp-breakpoint-mobile-base) {
      width: 100%;
      height: 0.2rem;

      transform: scaleX(0);
    }
  }

  &:hover {

    color: $bp-text-color-dark;

    &::after {
      transform: scaleX(1);
    }
  }
}

// ============================================================================
// :: States
// ============================================================================
.bp-subnav__item {

  &.is-active {

    .bp-subnav__item-link {
      color: $bp-text-color-dark;

      &::after {
        transform: scaleY(1);

        @include respond-at($bp-breakpoint-mobile-base) {
          transform: scaleX(1);
        }
      }
    }
  }
}