menu-level-container.scss

.hy-menu-level-container {
  &--mobile {
    background-color: var(--grayscale-white);
    display: block;
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
    visibility: hidden !important;
    width: 100%;

    &.is-open {
      height: auto;
      transform: translateX(0);
      visibility: visible !important;
    }

    &.hy-menu-level-container--level-1 {
      padding-top: 8px;
      position: relative;

      &:before {
        background-color: var(--brand-main-light);
        content: '';
        display: block;
        height: 3px;
        left: 12px;
        position: absolute;
        right: 12px;
        top: 0;

        @include breakpoint($narrow) {
          left: 28px;
          right: 28px;
        }
      }
    }
  }

  &--desktop {
    align-items: flex-start;
    display: flex;
    flex-flow: column;
    //max-width: 500px; // ?? Ask Mikko
    width: 100%;

    &.is-open {
      display: block;
      visibility: visible;
    }

    &:not(.hy-menu-level-container--level-1):not(.hy-menu-level-container--level-2) {
      display: none;
    }
    &.hy-menu-level-container--level-2 {
      background-color: var(--grayscale-background-box);
    }
  }

  &--sidepanel {
    background-color: var(--grayscale-white);
    border-left: 1px solid rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    height: 100vh;
    left: 0;
    margin: 0;
    max-width: 320px;
    padding-left: 13px;
    padding-right: 13px;
    padding-top: 240px;
    position: absolute;
    top: 0;
    visibility: visible;
    width: 20%;
    z-index: 123;

    &:not(.hy-menu-level-container--level-1) {
      display: none;
      min-height: var(--minHeight);
      transform: translateX(calc(100% - 1px));

      &.active-trail-panel,
      &.is-open {
        display: flex;
        max-width: 320px;
        width: 20vw;
      }
    }
    &.is-open,
    &.active-trail-panel {
      height: 100%;
      min-height: var(--minHeight);
    }
  }

  &--sidenav {
    flex-flow: column;
    margin: 0;
    padding: 0;
    position: relative;

    &:not(.hy-menu-level-container--level-1) {
      opacity: 0;
      visibility: hidden;

      &.is-closed {
        animation-direction: normal;
        animation-duration: 0.25s;
        animation-fill-mode: backwards;
        animation-name: slide-panel-in;
      }

      &.is-open {
        animation-direction: normal;
        animation-duration: 0.25s;
        animation-fill-mode: forwards;
        animation-name: slide-panel-in;
        display: flex;
        max-width: 320px;
        opacity: 1;
        visibility: visible;
        width: 20vw;
      }
    }

    &.is-open.is-open-on-top {
      display: none;
      transform: none !important;
    }

    &:not(.hy-menu-level-container--level-1).hy-menu-level-container.is-open {
      max-width: 320px;
      width: 20vw;
    }

    .hy-menu-level-container--level-1 {
      display: flex;
      width: 100%;
    }

    &:not(.hy-menu-level-container--level-1) {
      background-color: var(--grayscale-white);
      border-left: 1px solid rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      height: 100vh;
      left: 0;
      margin: -100vh 0;
      max-width: 320px;
      min-height: var(--minHeight);
      padding-left: 13px;
      padding-right: 13px;
      position: absolute;
      transform: translateX(calc(100% - 1px));
      width: 20vw;
      z-index: 123;

      &.hy-menu-level-container--level-2 {
        transform: translateX(100%) !important;
      }
    }

    .hy-menu-level-container--level-2 {
      margin: -100vh 0;
      padding: 100vh 13px;
      top: 0;
    }

    .hy-menu-level-container--level-3,
    .hy-menu-level-container--level-4,
    .hy-menu-level-container--level-5,
    .hy-menu-level-container--level-6,
    .hy-menu-level-container--level-7 {
      padding: 100vh 13px;
      top: 100vh;
    }
  }
}

@keyframes slide-panel-in {
  from {
    display: none;
    opacity: 0;
    transform: translateX(0);
    z-index: 1;
  }

  25% {
    display: flex;
  }

  35% {
    transform: translateX(calc(100% - 1px));
  }

  to {
    opacity: 1;
    z-index: 123;
  }
}

@keyframes slide-panel-out {
  from {
    transform: translateX(100%);
    opacity: 1;
    z-index: 123;
  }

  25% {
    transform: translateX(0);
  }

  95% {
    opacity: 0;
    z-index: 1;
  }

  to {
    display: none;
  }
}