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

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

@mixin reset-ul {
  margin-block: 0;
  padding-inline: 0;
}

.ams-page-menu {
  align-items: center;
  box-sizing: border-box;
  column-gap: var(--ams-page-menu-column-gap);
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  row-gap: var(--ams-page-menu-row-gap);

  @include reset-ul;
}

.ams-page-menu--align-end {
  justify-content: end;
}

.ams-page-menu--no-wrap {
  flex-wrap: nowrap;
}

@mixin page-menu-item {
  color: var(--ams-page-menu-item-color);
  display: inline-flex;
  font-family: var(--ams-page-menu-item-font-family);
  font-size: var(--ams-page-menu-item-font-size);
  font-weight: var(--ams-page-menu-item-font-weight);
  gap: var(--ams-page-menu-item-gap);
  line-height: var(--ams-page-menu-item-line-height);
  outline-offset: var(--ams-page-menu-item-outline-offset);
  text-align: center;
  text-decoration-line: var(--ams-page-menu-item-text-decoration-line);
  text-decoration-thickness: var(--ams-page-menu-item-text-decoration-thickness);
  text-underline-offset: var(--ams-page-menu-item-text-underline-offset);
  touch-action: manipulation;
  white-space: nowrap;
}

.ams-page-menu__link {
  box-sizing: border-box;

  @include page-menu-item;
  @include text-rendering;
}

.ams-page-menu__link:hover,
.ams-page-menu__button:hover {
  color: var(--ams-page-menu-item-hover-color);
  text-decoration-line: var(--ams-page-menu-item-hover-text-decoration-line);
}

.ams-page-menu__link svg {
  color: currentColor;
}