Sub Nav

.sub-nav {
  $root: &;
  $link-min-width: 70%;

  &__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  &__item {
    width: 100%;

    @include breakpoint(medium) {
      width: calc(50% - 2.4rem);
      margin-right: 2.4rem;
    }

    @include breakpoint(large) {
      width: calc(33.3% - 2.4rem);
    }
  }

  &__link {
    position: relative;
    display: inline-block;
    width: min-content;
    min-width: $link-min-width;
    max-width: 100%;
    min-height: 4.4rem;
    margin: 0;
    padding: 1.1rem 5rem 1.1rem 0;
    overflow: hidden;
    outline: 0 none;
    border: 0 none;
    background-color: $transparent;
    background-position-x: 100%;
    background-size: 220% 100%;
    vertical-align: middle;
    line-height: 2rem;
    color: $black;
    text-align: left;
    text-overflow: ellipsis;
    cursor: pointer;

    //Edge
    @supports (-ms-ime-align: auto) {
      width: $link-min-width;
    }

    &,
    &:hover,
    &:active {
      text-decoration: none;
    }

    &,
    &::before,
    &::after {
      background-repeat: no-repeat;
    }

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: calc(100% - 4.4rem);
      width: 0;
      height: 4.4rem;
      transform: translateY(-50%);
      border: 0 $primary solid;
      line-height: inherit;
    }

    &::after {
      $symbol: map-get($icons, 'chevron-right');
      @include icon-content-extended($symbol, inline-block);

      position: absolute;
      top: 50%;
      right: 0;
      width: 4.4rem;
      height: 4.4rem;
      transform: translateY(-50%);
      background-image: linear-gradient(
        to right,
        $black percentage(1/3),
        $transparent percentage(1/3),
        $transparent percentage(2/3),
        $transparent percentage(2/3)
      );
      background-position-x: 98%;
      background-size: 330% 100%;
      line-height: 4.4rem;
      color: $primary;
      text-align: center;
    }

    &:hover {
      background-position-x: 0;
      color: $primary;
      transition: background-position 0.2s linear;

      &::before {
        width: 4.4rem;
        border-width: 0.2rem;
        transition: width 0.2s linear, border-right-width 0s linear 0.2s;
      }

      &::after {
        background-position-x: 50%;
        color: $primary;
        transition: background-position 0.2s linear;
      }
    }

    &:active {
      color: $black;

      &::before {
        width: 4.4rem;
        border-width: 0.2rem;
        transition: width 0.2s linear, border-right-width 0s linear 0.2s;
      }

      &::after {
        background-position-x: 0;
        color: $white;
      }
    }
  }
}