/* Theming for VBx Main Menu block */
.vbx-main-menu {
  color: var(--vbx-main-menu__panel--text-color, #000000);
  display: flex;
  justify-content: flex-end;

  /* Sidebar open-close functionality */
  #vbx-main-menu__nav__sidebar-checkbox {
    display: none;

    &:checked ~ .vbx-main-menu__nav__links {
      right: 0;
    }
  }

  .vbx-main-menu__nav__open-sidebar-button {
    cursor: pointer;

    svg {
      fill: var(--vbx-main-menu__open-button--color, #000000);
      display: block;
      padding: 0.5rem;
    }
  }

  /* Links container */
  .vbx-main-menu__nav__links {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 490;
    background-color: var(--vbx-main-menu__panel--background-color, #ffffff);
    width: clamp(300px, 50vw, 90%);
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: flex-start;
    transition: 0.15s ease-in;
    padding: 1rem 2rem;

    .vbx-main-menu__nav__links__close-sidebar-button {
      margin-bottom: 3rem;
      cursor: pointer;

      svg {
        fill: var(--vbx-main-menu__close-button--color, #000000);
        display: block;
      }
    }

    ul {
      display: flex;
      gap: 1.5rem;
      flex-direction: column;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        text-align: left;
        font-size: 1.2rem;
        a {
          display: block;
          color: var(--vbx-main-menu__panel--link-color, #000000);
          text-decoration: none;
          width: 100%;
        }
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  .vbx-main-menu {
    #sidebar-active {
      display: none;
    }

    .vbx-main-menu__nav__open-sidebar-button, .vbx-main-menu__nav__links__close-sidebar-button {
      display: none;
    }

    .vbx-main-menu__nav__links {
      background-color: transparent;
      position: unset;
      flex-direction: row;
      align-items: center;
      width: 100%;

      ul {
        flex-direction: row;
        justify-content: flex-end;

        li {
          text-align: center;
          &, a {
            color: var(--vbx-main-menu--link-color, #000000);
          }
        }

        li.vbx-main-menu__nav__links__item--has-submenu {
          /*TODO: Fortsett å tilpasse submenyer*/
          svg {
            display: none;
          }
        }
      }

      ul.vbx-main-menu__nav__links__submenu {
        display: none;
      }
    }
  }
}