/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/breakpoint" as *;
@use "../../common/hyphenation" as *;
@use "../../common/resets" as *;
@use "../../common/text-rendering" as *;

.ams-menu {
  background-color: var(--ams-menu-background-color);
  font-family: var(--ams-menu-font-family);
  font-size: var(--ams-menu-font-size);
  font-weight: var(--ams-menu-font-weight);
  line-height: var(--ams-menu-line-height);

  // Menu must overlap the horizontal padding of Page Header to span the entire window.
  // We accept that this approach with a negative margin tightly couples the component to that context.
  margin-inline: calc(var(--ams-grid-padding-inline) * -1);
  padding-block: var(--ams-menu-padding-block);

  // We subtract the menu link padding to align the items with surrounding content.
  padding-inline: calc(var(--ams-grid-padding-inline) - var(--ams-menu-link-padding-inline));

  @media (min-width: $ams-breakpoint-medium) {
    margin-inline: calc(
      var(
          --ams-grid-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
          var(--ams-grid-vi-medium-padding-inline)
        ) *
        -1
    );
    padding-inline: var(
      --ams-grid-medium-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
      var(--ams-grid-vi-medium-padding-inline)
    );
  }

  @media (min-width: $ams-breakpoint-wide) {
    display: none;
    margin-inline: 0; // Override negative margin above.
    max-inline-size: var(
      --ams-menu-wide-max-inline-size /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
      var(--ams-menu-vi-wide-max-inline-size)
    );
    padding-block: var(
      --ams-menu-wide-padding-block /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
      var(--ams-menu-vi-wide-padding-block)
    );
    padding-inline: var(
      --ams-menu-wide-padding-inline /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
      var(--ams-menu-vi-wide-padding-inline)
    );
  }
}

.ams-menu--in-wide-window {
  display: none;

  @media (min-width: $ams-breakpoint-wide) {
    display: block;
  }
}

.ams-menu__list {
  @include reset-ul;

  display: grid;

  @include hyphenation;
  @include text-rendering;

  @media (min-width: $ams-breakpoint-wide) {
    gap: var(--ams-menu-list-gap);
  }
}

.ams-menu__link {
  align-items: flex-start;
  color: var(--ams-menu-link-color);
  display: inline-flex; // Inline display prevents an excessive hit area next to the link text.
  gap: var(--ams-menu-link-gap);
  outline-offset: var(--ams-menu-link-outline-offset);
  padding-block: var(--ams-menu-link-padding-block);
  padding-inline: var(--ams-menu-link-padding-inline);
  text-decoration-line: var(--ams-menu-link-text-decoration-line);
  text-decoration-thickness: var(--ams-menu-link-text-decoration-thickness);
  text-underline-offset: var(--ams-menu-link-text-underline-offset);

  &:hover {
    color: var(--ams-menu-link-hover-color);
    text-decoration-line: var(--ams-menu-link-hover-text-decoration-line);
  }

  .ams-menu__icon {
    align-self: initial;
  }

  @media (min-width: $ams-breakpoint-wide) {
    align-items: center;
    display: flex; // The links do stretch in the vertical layout of Menu.
    flex-direction: column;
    gap: var(
      --ams-menu-link-wide-gap /* This token is @deprecated. Will be removed on or after 2026-10-20. */,
      var(--ams-menu-link-vi-wide-gap)
    );
    text-align: center;

    .ams-menu__icon {
      --ams-icon-font-size: var(--ams-icon-heading-2-font-size);
      --ams-icon-line-height: var(--ams-icon-heading-2-line-height);
    }
  }
}