/* Header Drawer - Main */
.menu-drawer {
  --drawer-top: calc(var(--header-group-height));
  --drawer-height: calc(100dvh - var(--drawer-top));
  top: var(--drawer-top);
  padding-block-start: var(--padding-2xs);
  width: 100%;
  max-width: unset;
  box-shadow: none;

  .header[data-scroll-direction='up'] & {
    --drawer-top: calc(var(--header-height) - 1px);
  }
}

/* Header Drawer - Utility */
.menu-drawer__utility-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-lg);
  margin-block-start: auto;
  padding: var(--padding-2xl) var(--padding-lg);
}

/* Header Drawer - Account Drawer */
.account-drawer {
  .account-button {
    width: auto;
    height: auto;
    align-items: center;
    gap: var(--gap-sm);
    padding: 0;
    font-size: var(--font-size--paragraph);
  }

  .account-button__icon,
  .account-button__icon svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }
}

/* Header Drawer - Utility links menu */
.menu-drawer-list__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* Header Drawer - Toggle */
.menu-drawer__toggle {
  position: relative;
  display: flex;
  margin-inline: var(--margin-lg);
  margin-block-end: var(--margin-2xl);
  padding: var(--padding-2xs);
  background-color: var(--color-selected-variant-background);
}

.menu-drawer__toggle-button {
  position: relative;
  width: 50%;
  padding: var(--padding-sm);
  border: none;
  cursor: pointer;
  background-color: transparent;
  transition: background-color var(--animation-speed-slow) ease-in-out;
}

.menu-drawer__toggle-button.is-active {
  background-color: var(--color-border);
}

.menu-drawer__navigation-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.menu-drawer__navigation-container {
  position: static;

  &[hidden] {
    display: none;
  }
}

/* Header Drawer - Menu */
.menu-drawer__menu {
  --menu-top-level-font-family: var(--font-body--family);
  --menu-top-level-font-size-desktop: ;
  --menu-top-level-font-style: var(--font-body--style);
  --menu-top-level-font-weight: var(--font-body--weight);
  --menu-top-level-font-case: none;
  --menu-top-level-font-size: var(--font-size--md);
  --menu-top-level-font-line-height: var(--line-height--body-normal);
  --menu-top-level-font-color: var(--color-foreground);
  --menu-top-level-font-color-rgb: var(--color-foreground-rgb);
  --menu-parent-font-family: var(--font-heading--family);
  --menu-parent-font-style: var(--font-heading--style);
  --menu-parent-font-weight: var(--font-heading--weight);
  --menu-parent-font-case: none;
  --menu-child-font-family: var(--font-body--family);
  --menu-child-font-style: var(--font-body--style);
  --menu-child-font-weight: var(--font-body--weight);
  --menu-child-font-case: none;
  width: 100%;

  > .menu-drawer__list-item {
    min-height: 3.5rem;
  }

  &.menu-drawer__menu--grandchildlist {
    padding-inline: 0;
  }
}

.menu-drawer__menu-item {
  position: relative;
  min-height: unset;
  padding-block: var(--padding-lg);

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-border);

    /* stylelint-disable-next-line function-url-scheme-allowed-list */
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDE2IDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wIDAuNUMxLjc0NjQ4IDAuNSAyLjI1MzUyIDEuNSA0IDEuNUM1Ljc0NjQ4IDEuNSA2LjI1MzUyIDAuNSA4IDAuNUM5Ljc0NjQ4IDAuNSAxMC4yNTM1IDEuNSAxMiAxLjVDMTMuNzQ2NSAxLjUgMTQuMjUzNSAwLjUgMTYgMC41IiBzdHJva2U9ImJsYWNrIi8+Cjwvc3ZnPgo=');
    mask-position: left bottom;
    mask-repeat: repeat-x;
    mask-size: 16px 2px;
    pointer-events: none;
  }

  .svg-wrapper,
  .svg-wrapper svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    padding: 0;
  }
}

.menu-drawer__menu-item--parent {
  padding-block: var(--padding-2xl);
}

.menu-drawer__menu--childlist .menu-drawer__list-item--flat {
  margin-block-end: var(--margin-lg);
}

.menu-drawer__back-button {
  color: var(--color-caption);

  > .svg-wrapper {
    margin-inline-end: var(--margin-xs);
  }

  > .svg-wrapper,
  > .svg-wrapper > svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }
}

/* Single Item Menu logic */
.menu-drawer__navigation--single-item {
  .menu-drawer__menu-item--mainlist {
    display: none;
  }

  .menu-drawer__menu-container {
    &[open] > summary {
      display: none;
    }
  }

  .menu-drawer__menu--childlist {
    padding-inline: 0;
  }

  .menu-drawer__submenu {
    position: static;
    transform: none;
    visibility: visible;
    opacity: 1;
    display: block;
    height: auto;
    background: transparent;
  }

  .menu-drawer__inner-submenu {
    padding-inline: 0;
  }

  .menu-drawer__nav-buttons {
    display: none;
  }
}

/* Header Drawer - Localization */
.menu-drawer__localization {
  margin-block-start: var(--margin-2xl);
}

.drawer-localization {
  .drawer-localization__button--label {
    gap: var(--gap-2xs);
  }

  .mobile-localization--country {
    gap: var(--gap-sm);
  }

  .icon-flag {
    margin: 0;
    clip-path: unset;
  }

  .icon-flag,
  .icon-flag > svg {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
  }

  .menu-drawer__submenu {
    height: var(--drawer-height);

    .language-selector {
      padding-inline-end: 75px;

      .svg-wrapper {
        margin-inline-end: 60px;
      }
    }
  }
}