/* eds-lib navigation-menu - generated by build.js, do not edit.
   Source: projects/finiti/eds-angular/src/lib/navigation-menu/navigation-menu.scss */

/* Core colors */
/* Palette: primary */
/* Palette: secondary */
/* Palette: tertiary */
/* Palette: neutral */
/* Palette: neutral-variant */
/* Semantic tokens (light scheme) */
/* Usage example:
   body { background: $color-background; color: $color-on-background; }
*/
.nav {
  --_row-height: var(--nav-item-height, 54px);
  --_root-padding-inline: var(--nav-root-item-padding-inline, 14px);
  --_root-padding-block: var(--nav-root-item-padding-block, 18px);
  --_root-font-size: var(--nav-root-item-font-size, 15px);
  --_root-fg: var(--nav-root-item-color, #75777c);
  --_root-divider: var(--nav-root-divider-color, #cacdcf);
  --_root-divider-height: var(--nav-root-divider-height, 20px);
  --_chevron-size: var(--nav-chevron-size, 11px);
  --_chevron-color: var(--nav-chevron-color, #a43943);
  --_panel-min-width: var(--nav-panel-min-width, 251px);
  --_panel-bg: var(--nav-panel-bg, #ECEEF4);
  --_panel-bg-nested: var(--nav-panel-bg-nested, #EAF1FF);
  --_row-hover-bg: var(--nav-item-hover-bg, #EAF1FF);
  --_divider: var(--nav-divider-color, #C1C7CE);
  --_divider-nested: var(--nav-divider-color-nested, #D1E4FF);
  --_item-height: var(--nav-dropdown-item-height, 56px);
  --_item-height-nested: var(--nav-dropdown-item-height-nested, 50px);
  --_item-padding-inline-start: var(--nav-dropdown-item-padding-inline-start, 20px);
  --_item-padding-inline-end: var(--nav-dropdown-item-padding-inline-end, 16px);
  --_trailing-size: var(--nav-trailing-icon-size, 24px);
  --_trailing-color: var(--nav-trailing-icon-color, #003964);
  --_row-height-mobile: var(--nav-item-height-mobile, 56px);
  --_indent: var(--nav-indent, 16px);
  --_mobile-bg: var(--nav-mobile-bg, #f8f9ff);
  --_mobile-bg-nested: var(--nav-mobile-bg-nested, #ffffff);
  --_mobile-divider: var(--nav-mobile-divider-color, #c8ced4);
  --_mobile-divider-nested: var(--nav-mobile-divider-color-nested, #e7e9ec);
  --_mobile-fg: var(--nav-mobile-item-color, #003964);
  --_mobile-chevron: var(--nav-mobile-chevron-color, #8ba4b8);
  --_row-fg: var(--nav-item-color, #191c20);
  --_accent: var(--nav-item-active-color, #003964);
  --_radius: var(--nav-panel-radius, var(--eds-radius-sm, 4px));
  --_z: var(--nav-z, 1000);
  --_panel-offset: var(--nav-panel-offset, 0);
  --_icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M2.40625 3.95312L5.5 7.04688L8.59375 3.95312' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --_icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.172 12L8.222 7.05L9.636 5.636L16 12L9.636 18.364L8.222 16.95L13.172 12Z' fill='black'/%3E%3C/svg%3E");
  display: block;
  font-family: var(--eds-font-family-sans, system-ui, sans-serif);
}
.nav nav {
  position: relative;
}
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav li {
  position: relative;
}
.nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eds-space-4, 16px);
  min-height: var(--_item-height);
  box-sizing: border-box;
  padding: var(--eds-space-2, 8px) var(--_item-padding-inline-end) var(--eds-space-2, 8px) var(--_item-padding-inline-start);
  color: var(--_row-fg);
  font-size: var(--eds-font-size-body-medium, 14px);
  line-height: 20px;
  letter-spacing: 0.25px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--eds-duration-medium, 200ms) var(--eds-ease-standard, ease), color var(--eds-duration-medium, 200ms) var(--eds-ease-standard, ease);
}
.nav a:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: -2px;
}
.nav li.disabled {
  opacity: var(--eds-opacity-disabled, 0.38);
  pointer-events: none;
}
.nav li > ul {
  display: none;
}
.nav li.open > ul {
  display: block;
}
.nav ul[data-depth="0"] {
  display: flex;
  align-items: stretch;
  gap: 0;
}
@media (min-width: 905px) {
  .nav ul[data-depth="0"] > li > a {
    justify-content: center;
    gap: 10px;
    min-height: var(--_row-height);
    padding: var(--_root-padding-block) var(--_root-padding-inline);
    color: var(--_root-fg);
    font-size: var(--_root-font-size);
    font-weight: var(--eds-font-weight-medium, 500);
    line-height: normal;
    letter-spacing: normal;
    white-space: nowrap;
  }
  .nav ul[data-depth="0"] > li + li::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: 1px;
    height: var(--_root-divider-height);
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(to bottom, var(--_root-divider) 0 1px, transparent 1px 3px);
    pointer-events: none;
  }
  .nav ul[data-depth="0"] > li > a:hover {
    color: var(--_accent);
  }
  .nav ul[data-depth="0"] > li.open > a {
    background-color: var(--_panel-bg);
  }
  .nav ul[data-depth="0"] > li > a.active,
  .nav ul[data-depth="0"] > li > a.trail {
    color: var(--_accent);
  }
  .nav ul[data-depth="0"] > li.has-child > a::after {
    content: "";
    flex: 0 0 auto;
    width: var(--_chevron-size);
    height: var(--_chevron-size);
    background-color: var(--_chevron-color);
    mask: var(--_icon-chevron-down) center/contain no-repeat;
  }
  .nav li > ul {
    position: absolute;
    z-index: var(--_z);
    min-width: var(--_panel-min-width);
    border-start-start-radius: var(--_radius);
    border-start-end-radius: 0;
    border-end-start-radius: var(--_radius);
    border-end-end-radius: var(--_radius);
    background-color: var(--_panel-bg);
  }
  .nav li > ul > li:first-child > a {
    border-start-start-radius: var(--_radius);
  }
  .nav li > ul > li:last-child > a {
    border-end-start-radius: var(--_radius);
    border-end-end-radius: var(--_radius);
  }
  .nav ul[data-depth="1"] {
    inset-block-start: 100%;
    inset-inline-start: 0;
  }
  .nav li > ul:not([data-depth="1"]) {
    inset-block-start: var(--_panel-offset);
    inset-inline-start: 100%;
    background-color: var(--_panel-bg-nested);
  }
  .nav li > ul:not([data-depth="1"]) > li > a {
    min-height: var(--_item-height-nested);
    font-size: var(--eds-font-size-body-small, 12px);
    line-height: 16px;
    letter-spacing: 0.4px;
  }
  .nav li > ul > li + li > a {
    border-top: 1px solid var(--_divider);
  }
  .nav li > ul:not([data-depth="1"]) > li + li > a {
    border-top-color: var(--_divider-nested);
  }
  .nav li > ul > li.has-child > a::after {
    content: "";
    flex: 0 0 auto;
    width: var(--_trailing-size);
    height: var(--_trailing-size);
    background-color: var(--_trailing-color);
    mask: var(--_icon-arrow-right) center/contain no-repeat;
  }
  .nav li > ul > li > a:hover,
  .nav li > ul > li.open > a {
    background-color: var(--_row-hover-bg);
  }
  .nav li > ul > li > a.active {
    background-color: var(--_row-hover-bg);
    color: var(--_accent);
    font-weight: var(--eds-font-weight-medium, 500);
  }
}
@media (max-width: 904.98px) {
  .nav ul[data-depth="0"] {
    display: block;
  }
  .nav a {
    min-height: var(--_row-height-mobile);
    padding-inline-start: calc(var(--eds-space-4, 16px) + var(--depth, 0) * var(--_indent));
    border-bottom: 1px solid var(--_mobile-divider-nested);
    background-color: var(--_mobile-bg-nested);
    color: var(--_mobile-fg);
    font-size: var(--eds-font-size-body-large, 16px);
  }
  .nav ul[data-depth="0"] > li > a {
    border-bottom-color: var(--_mobile-divider);
    background-color: var(--_mobile-bg);
    color: var(--_mobile-fg);
    line-height: 24px;
    letter-spacing: 0.5px;
  }
  .nav li > ul a {
    font-size: var(--eds-font-size-body-medium, 14px);
    line-height: 20px;
    letter-spacing: 0.25px;
  }
  .nav li.has-child > a::after {
    content: "expand_more";
    flex: 0 0 auto;
    color: var(--_mobile-chevron);
    font-family: "Material Symbols Outlined";
    font-size: 24px;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    font-feature-settings: "liga";
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transition: transform var(--eds-duration-medium, 200ms) var(--eds-ease-standard, ease);
  }
  .nav li.has-child.open > a::after {
    transform: rotate(180deg);
  }
  .nav a.active {
    font-weight: var(--eds-font-weight-medium, 500);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav a,
  .nav li > a::after {
    transition: none;
  }
}

:where(header, .eds-header):has(.nav) {
  overflow: visible;
}