.sui-l-second-level-nav {
  grid-area: second-level-nav;
  z-index: $sui-z-index-o-second-level-nav-mobile;
  display: flex;
  flex-direction: column;
  position: relative;
  width: $sui-l-second-level-nav-width;
  transition: all 0.4s $sui-curve-easeInOutQuint;
  will-change: width;

  @include suiShrinkNavState() {
    width: $sui-l-second-level-nav-width-shrinked;
  }

  @include suiMediaMax($sui-breakpoint-sm) {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    transition: all 0s;

    @include suiExpandNavState() {
      display: block;
    }

    .sui-o-topbar ~ * & {
      height: calc(100% - #{$sui-l-topbar-height-mobile});
      top: $sui-l-topbar-height-mobile;
    }

    .sui-l-first-level-nav ~ * & {
      height: calc(100% - #{$sui-l-first-level-nav-height-mobile});
      top: $sui-l-first-level-nav-height-mobile;
    }

    .sui-o-topbar ~ .sui-l-first-level-nav ~ * & {
      height: calc(100% - #{$sui-l-first-level-nav-height-mobile} - #{$sui-l-topbar-height-mobile});
      top: $sui-l-first-level-nav-height-mobile + $sui-l-topbar-height-mobile;
    }
  }

  &__toggle-button {
    z-index: 1;
    position: absolute;
    display: none;
    top: rem(15);
    left: $sui-l-second-level-nav-width;
    transform: translateX(-50%);
    transform-origin: center center;
    background: $sui-color-brand-denim-100;
    width: rem(24);
    height: rem(24);
    padding: 0;
    font-size: rem(14);
    border-radius: rem(24);
    box-shadow: $sui-shadow-200;
    transition: all 0.4s $sui-curve-easeInOutQuint;

    @include suiMediaMin($sui-breakpoint-sm) {
      display: block;
    }

    @include suiShrinkNavState() {
      transform: rotate(-180deg) translateX(0);
      left: $sui-space-sm;
    }
  }

  &__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    color: $sui-color-brand-denim-100;
    background: $sui-color-brand-denim-700;
  }

  &__content-scroll {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: $sui-space-md;
    padding-bottom: $sui-space-lg;
    width: $sui-l-second-level-nav-width;
    transition: all 0.4s $sui-curve-easeOutBack;

    @include suiMediaMax($sui-breakpoint-sm) {
      width: 100%;
    }

    @include suiShrinkNavState() {
      transform: translateX($sui-space-xs * -1);
      padding: $sui-space-sm;
      padding-top: $sui-space-xxl;
      padding-bottom: $sui-space-xxl;
    }
  }

  &__title {
    font-size: $sui-font-size-sm;
    color: $sui-color-brand-denim-400;
    margin-top: $sui-space-md;
    margin-bottom: $sui-space-xs;
    padding: 0 $sui-space-sm;
    text-transform: uppercase;

    @include suiShrinkNavState() {
      opacity: 0;
      height: 0;
      margin-bottom: 0;
    }
  }

  &__link {
    position: relative;
    display: flex;
    align-items: flex-start;
    color: inherit;
    text-decoration: none;
    font-size: $sui-font-size-ms;
    border-radius: $sui-border-radius-md;
    margin: $sui-space-xxs*0.8 0;
    padding: $sui-space-xs $sui-space-sm;
    transition: 0.1s $sui-curve-easeInOutQuint;

    @include suiShrinkNavState() {
      height: rem(30);
      align-items: center;
    }

    &:hover,
    &:focus {
      background: $sui-color-brand-denim-800;
    }

    &.as--active {
      background: $sui-color-brand-denim-800;
    }

    &.as--disabled {
      cursor: not-allowed;
      pointer-events: none;
      opacity: 0.3;
    }

    &.as--new {
      padding-right: $sui-space-xl;

      &::after {
        content: 'new';
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate($sui-space-xxs, -50%);
        background: $sui-color-heliotrope;
        color: white;
        padding: $sui-space-xxs*0.5 $sui-space-xs;
        font-size: $sui-font-size-xxs * 0.9;
        text-transform: uppercase;
        border-radius: $sui-border-radius-rounded;
        font-weight: bold;
        box-shadow: 0 0 0 0 rgba($sui-color-heliotrope, 1);
        animation: sui-l-second-level-nav-badge-new-animation 2s infinite linear;
      }
    }

    &.as--coming-soon {
      cursor: not-allowed;
      pointer-events: none;
      opacity: 0.4;
      border: $sui-size-border dashed $sui-color-brand-denim-300;

      @include suiShrinkNavState() {
        border-color: transparent;
      }

      &::after {
        content: 'coming soon';
        position: absolute;
        top: 0;
        right: 0;
        transform: translate($sui-space-xxs, -50%);
        background: white;
        color: $sui-color-text;
        padding: $sui-space-xxs*0.5 $sui-space-xs;
        font-size: $sui-font-size-xxs * 0.9;
        text-transform: uppercase;
        border-radius: $sui-border-radius-rounded;
        font-weight: bold;
      }
    }
  }

  &__link-tooltip-hitzone {
    display: none;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: $sui-l-second-level-nav-width-shrinked;
    background: transparent;

    @include suiShrinkNavState() {
      display: block;
    }
  }

  &__link-label {
    transition: opacity 0.2s $sui-curve-easeInOutQuint;
    margin-left: $sui-space-sm;

    @include suiShrinkNavState() {
      opacity: 0;
    }
  }

  &__contextual {
    margin-top: auto;
    padding-top: $sui-space-lg;
  }

  &__contextual-info {
    background: $sui-color-brand-denim-800;
    border-radius: $sui-border-radius-md;
    border: rem(1) solid darken($sui-color-brand-denim-800, 10%);
    padding: $sui-size-xxs;
    margin-bottom: $sui-space-md;
    overflow: hidden;
    font-size: $sui-font-size-sm;
    color: $sui-color-brand-denim-400;
    transition: all 0.1s $sui-curve-easeInOutQuint;

    @include suiShrinkNavState() {
      pointer-events: none;
      opacity: 0;
      height: 0;
      margin: 0;
      padding: 0;
    }
  }

  &__contextual-action {
    transition: all 0.1s $sui-curve-easeInOutQuint;
    overflow: hidden;
    margin-bottom: $sui-space-md;

    @include suiShrinkNavState() {
      display: none;
    }
  }

  &__contextual-action-shrinked {
    pointer-events: none;
    opacity: 0;
    height: 0;
    overflow: hidden;
    width: $sui-l-second-level-nav-width-shrinked - $sui-space-xs;
    transition: all 0.1s $sui-curve-easeInOutQuint;

    @include suiShrinkNavState() {
      pointer-events: auto;
      opacity: 1;
      height: auto;
    }
  }

  &__contextual-footer {
    margin-top: $sui-space-md;
    transition: all 0.1s $sui-curve-easeInOutQuint;

    @include suiShrinkNavState() {
      display: none;
    }
  }
}
