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;
    }
  }

  &--desktop {
    //align-items: center;
    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);
    }
  }

  &--sidenav {
    display: flex;
    flex-flow: column;

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

    &:not(.is-open):not(.hy-menu-level-container--level-1) {
      display: none;
      visibility: hidden;
    }
  }
}