/**
 * @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) * -1);
    padding-inline: var(--ams-grid-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);
    padding-block: var(--ams-menu-wide-padding-block);
    padding-inline: var(--ams-menu-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);
    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);
    }
  }
}

/** @deprecated The menu has a dark background now, so this is no longer needed. */
.ams-menu__link--contrast {
  color: var(--ams-menu-link-contrast-color);

  &:hover {
    color: var(--ams-menu-link-contrast-hover-color);
  }
}

/** @deprecated The menu has a dark background now, so this is no longer needed. */
.ams-menu__link--inverse {
  color: var(--ams-menu-link-inverse-color);

  &:hover {
    color: var(--ams-menu-link-inverse-hover-color);
  }
}