/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-mutual-nav-list"] {
--mutual-nav-list-grid-template-columns: repeat(1, 1fr);
--mutual-nav-detail-grid-template-columns: 1fr;
--mutual-nav-detail-height: 3rem;
--link-transition: var(--link-primary-transition);
--icon-margin: auto;
--icon-fill: currentColor;
--link-current-background-color: hsl(239deg 25% 50%);
--link-current-color: var(--color-white);
--link-action-background-color: var(--color-primary-action-background-color);
--link-active-background-color: var(--color-primary-active-background-color);

--mutual-nav-link-height: 3rem;
--mutual-nav-link-padding: .1875rem var(--x-padding-right) .1875rem var(--x-padding-left);
--color: var(--color-text);
--link-color: var(--color-text);
--link-action-color: var(--color-text-action);
--link-active-color: var(--color-text-active);
--link-cursor: pointer;
}

[class*="a-nav-dropdown"] {
}

@media (width < 48em) { /* 0 -> 767px */

[class*="m-mutual-nav-list"] {
--mutual-nav-link-box-shadow: 0 1px 0 0 var(--border-color), inset 0 1px 0 0 var(--border-color);
}

[class*="a-nav-dropdown"] {
--link-cursor: default;
--link-pointer-event: none;
}

}

@media (width >= 48em) { /* 768px -> * */

[class*="m-mutual-nav-list"] {
--mutual-nav-list-grid-template-columns: 2px repeat(5, 1fr);
--mutual-nav-list-gap: 1px;
--mutual-nav-body-height: calc(3.75rem - 1px);
--mutual-nav-detail-grid-template-columns: 1fr 2px;
--mutual-nav-detail-height: 2.25rem;
--mutual-nav-detail-background-color: hsl(220deg 20% 87.50% / 50%);
--mutual-nav-link-height: inherit;
--mutual-nav-link-padding: .1875rem .375rem;
--mutual-nav-link-text-align: center;
--color: var(--color-white);
--link-color: var(--color-white);
--link-action-background-color: var(--color-primary-action);
--link-active-background-color: var(--color-primary-active);
--link-action-color: var(--color-white);
--link-active-color: var(--color-white);
--font-size: .75rem;
--line-height: 1.5;
}

}

@media (width >= 62em) { /* 992px -> * */

[class*="m-mutual-nav-list"] {
--font-size: .875rem;
}

}

/* @end @variables */

/* @group @m-mutual-nav-list */

[class*="m-mutual-nav-list"] {
z-index: 2;
display: grid;
grid-template-columns: var(--mutual-nav-list-grid-template-columns);
gap: var(--mutual-nav-list-gap);
height: var(--mutual-nav-list-height);
align-content: var(--mutual-nav-list-align-content);
box-shadow: var(--mutual-nav-list-box-shadow);
pointer-events: auto;
content-visibility: visible;
}

@media (width < 48em) { /* 0 -> 767px */

[class*="m-mutual-nav-list"] {
--mutual-nav-link-padding-right: 1.875rem;
--mutual-nav-link-background-image: url('../img/sprite-svg.svg#icon-arrow-right');
--mutual-nav-link-background-position: calc(100% - 1.125rem) 50%;
--mutual-nav-link-background-repeat: no-repeat;
--mutual-nav-link-background-size: .75rem .75rem;
}

}

@media (width >= 48em) { /* 768px -> * */

[class*="m-mutual-nav-list"]:before {
content: '';
position: relative;
z-index: 2;
align-self: center;
display: block;
width: 1px;
height: var(--mutual-nav-detail-height);
background-color: var(--mutual-nav-detail-background-color);
border-right: 1px solid var(--mutual-nav-detail-border-right-color);
}

[class*="m-mutual-nav-list"]:after {
content: '';
position: relative;
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
}

:where([class*="m-mutual-nav-list"]>li):after {
content: '';
align-self: center;
display: block;
width: 1px;
height: var(--mutual-nav-detail-height);
background-color: var(--mutual-nav-detail-background-color);
border-right: 1px solid var(--mutual-nav-detail-border-right-color);
}

}

[class*="m-mutual-nav-list"]>li {
position: relative;
display: grid;
grid-template-columns: var(--mutual-nav-detail-grid-template-columns);
gap: 2px;
height: inherit;
}

[class*="a-mutual-nav-link"],
[class*="a-nav-dropdown"] {
box-sizing: border-box;
display: grid;
align-items: center;
align-content: center;
height: var(--mutual-nav-link-height);
gap: .1875rem;
padding: var(--mutual-nav-link-padding);
padding-right: var(--mutual-nav-link-padding-right);
background-color: var(--link-background-color);
background-image: var(--mutual-nav-link-background-image);
background-position: var(--mutual-nav-link-background-position);
background-repeat: var(--mutual-nav-link-background-repeat);
background-size: var(--mutual-nav-link-background-size);
box-shadow: var(--mutual-nav-link-box-shadow);
text-align: var(--mutual-nav-link-text-align);
font-size: var(--mutual-nav-link-font-size);
line-height: var(--mutual-nav-link-line-height);
text-decoration-skip-ink: auto;
text-underline-position: under;
color: var(--link-color);
cursor: var(--link-cursor);
word-break: keep-all;
overflow-wrap: break-word;
pointer-events: var(--link-pointer-events);
transition: var(--link-secondary-transition);
}

[class*="is-current"] [class*="a-mutual-nav-link"] {
background-color: var(--link-current-background-color);
color: var(--link-current-color);
}

@media (hover: hover) {

:where(:not([class*="is-current"])) [class*="a-mutual-nav-link"]:hover {
background-color: var(--link-action-background-color);
}

}

:where(:not([class*="is-current"])) [class*="a-mutual-nav-link"]:focus {
background-color: var(--link-action-background-color);
}

[class*="a-mutual-nav-link"]:active {
background-color: var(--link-active-background-color);
}

/* @end @m-mutual-nav-list */

/* -------------------------------------------------------- */

/* @group @m-mutual-nav-header */

@media (width < 48em) { /* 0 -> 767px */

[class*="m-mutual-nav-header"] {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: var(--x-padding-left) auto 1fr auto var(--x-padding-right);
height: 3.75rem;
background-color: var(--color-white);
}

[class*="m-mutual-nav-header"] a {
grid-column: 2;
grid-row: 1;
}


[class*="m-mutual-nav-header"] label {
grid-column: 4;
grid-row: 1;
}

}

/* @end @m-mutual-nav-header */