.sui-l-first-level-nav {
  position: relative;
  grid-area: first-level-nav;
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  flex: none;
  z-index: $sui-z-index-o-first-level-nav-mobile;
  background: $sui-color-brand-denim-800;
  width: $sui-l-first-level-nav-width;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  transition: all 0.2s $sui-curve-easeOutBack, filter 0s;
  will-change: width;

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

  @include suiMediaMax($sui-breakpoint-sm) {
    width: 100%;
    height: $sui-l-first-level-nav-height-mobile;
    background: $sui-color-brand-denim-700;
    top: 0;
    display: none;
    overflow: hidden;
    transition: all 0s;
  }

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

  &__logo {
    margin-bottom: $sui-space-lg;
    margin-right: rem(-5);
    margin-left: rem(-1);

    @include suiMediaMax($sui-breakpoint-sm) {
      display: none;
    }
  }

  &__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: $sui-color-brand-denim-100;
    background: $sui-color-brand-denim-800;
    padding: $sui-space-md;

    @include suiMediaMax($sui-breakpoint-sm) {
      position: relative;
      height: $sui-l-first-level-nav-link-height-mobile;
      width: inherit;
      background: $sui-color-brand-denim-700;
      overflow-x: auto;
      overflow-y: hidden;
      margin-top: $sui-space-xl;
      flex-direction: row;
      align-items: flex-start;
      padding: 0 $sui-space-md;
    }
  }

  &__links {
    display: flex;
    flex-direction: column;

    @include suiMediaMax($sui-breakpoint-sm) {
      flex: 1;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }

    @include suiMediaMax($sui-breakpoint-xxs) {
      padding: 0 $sui-space-md 0 0;
    }
  }

  &__link {
    flex: none;
    min-width: 0;
    width: $sui-l-first-level-nav-link-width;
    height: $sui-l-first-level-nav-link-width;
    position: relative;
    border-radius: $sui-border-radius-lg;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: inherit;
    background: $sui-color-brand-denim-800;
    text-decoration: none;
    padding: $sui-space-xs $sui-space-xxs;
    margin-bottom: $sui-space-md;
    transition: all 0.2s $sui-curve-easeOutBack;

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

    @include suiMediaMax($sui-breakpoint-sm) {
      flex: auto;
      min-width: rem(85);
      border-radius: $sui-border-radius-md;
      border: 0;
    }

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

    &-icon {
      font-size: $sui-font-size-lg;
      transition: all 0.2s $sui-curve-easeOutBack;

      @include suiShrinkNavState() {
        font-size: $sui-font-size-md;
      }
    }

    &-label {
      font-size: $sui-font-size-xxs*.9;
      text-transform: uppercase;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 100%;
      font-weight: bold;
      margin-top: $sui-space-xxs;
      transition: all 0.2s $sui-curve-easeOutBack;

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

    &:not(:first-child) {
      @include suiMediaMax($sui-breakpoint-sm) {
        margin-left: $sui-space-md;
      }
    }

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

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

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

  &__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;

    @include suiMediaMax($sui-breakpoint-sm) {
      margin-top: 0;
      position: fixed;
      left: rem(16);
      top: rem(64);
    }

    .sui-a-avatar {
      transition: .2s;

      &:hover {
        box-shadow: 0 0 0 rem(2) rgba(255, 255, 255, .1);
      }
    }
  }
}