.dd { --sfx-dd-bg: var(--sfx-dd-bg--set, var(--neutral-ultra-light, #fff));
--sfx-dd-color: var(--sfx-dd-color--set, inherit);
--sfx-dd-transition-duration: var(--sfx-dd-transition-duration--set, .3s);
--sfx-dd-transition-easing: var(--sfx-dd-transition-easing--set, ease);
--sfx-dd-hover-transition-duration: var(--sfx-dd-hover-transition-duration--set, .15s); --sfx-dd-link-color: var(--sfx-dd-link-color--set, inherit);
--sfx-dd-link-color-hover: var(--sfx-dd-link-color-hover--set, var(--accent, #e11d48));
--sfx-dd-link-color-current: var(--sfx-dd-link-color-current--set, var(--accent, #e11d48));
--sfx-dd-link-bg-hover: var(--sfx-dd-link-bg-hover--set, transparent);
--sfx-dd-font-family: var(--sfx-dd-font-family--set, inherit);
--sfx-dd-font-size: var(--sfx-dd-font-size--set, inherit);
--sfx-dd-font-weight: var(--sfx-dd-font-weight--set, inherit);
--sfx-dd-letter-spacing: var(--sfx-dd-letter-spacing--set, normal);
--sfx-dd-text-transform: var(--sfx-dd-text-transform--set, none);
--sfx-dd-line-height: var(--sfx-dd-line-height--set, 1.3);
--sfx-dd-item-gap: var(--sfx-dd-item-gap--set, var(--space-s, .75rem));
--sfx-dd-pad-item-block: var(--sfx-dd-pad-item-block--set, var(--space-xs, .25rem));
--sfx-dd-pad-item-inline: var(--sfx-dd-pad-item-inline--set, var(--space-l, 1.25rem));
--sfx-dd-pad-label-block: var(--sfx-dd-pad-label-block--set, 0);
--sfx-dd-pad-label-inline: var(--sfx-dd-pad-label-inline--set, 0);
--sfx-dd-item-border-width: var(--sfx-dd-item-border-width--set, 1px);
--sfx-dd-item-border-color: var(--sfx-dd-item-border-color--set, var(--neutral-light, #e5e5e5)); --sfx-dd-main-color: var(--sfx-dd-main-color--set, var(--sfx-dd-link-color));
--sfx-dd-main-font-size: var(--sfx-dd-main-font-size--set, var(--sfx-dd-font-size));
--sfx-dd-main-font-weight: var(--sfx-dd-main-font-weight--set, var(--sfx-dd-font-weight));
--sfx-dd-main-link-color-hover: var(--sfx-dd-link-color-hover);
--sfx-dd-sub-color: var(--sfx-dd-sub-color--set, var(--sfx-dd-link-color));
--sfx-dd-sub-font-size: var(--sfx-dd-sub-font-size--set, var(--sfx-dd-font-size));
--sfx-dd-sub-font-weight: var(--sfx-dd-sub-font-weight--set, var(--sfx-dd-font-weight));
--sfx-dd-sub-link-color-hover: var(--sfx-dd-link-color-hover); --sfx-dd-chevron: var(--sfx-dd-chevron--set, currentColor);
--sfx-dd-chevron-size: var(--sfx-dd-chevron-size--set, .5rem);
--sfx-dd-chevron-thickness: var(--sfx-dd-chevron-thickness--set, 2px); --sfx-dd-back-bg: var(--sfx-dd-back-bg--set, var(--neutral-ultra-light, #f6f6f6));
--sfx-dd-back-color: var(--sfx-dd-back-color--set, inherit);
--sfx-dd-back-font-weight: var(--sfx-dd-back-font-weight--set, 600);
--sfx-dd-chevron-back: var(--sfx-dd-chevron-back--set, var(--accent, #e11d48));
--sfx-dd-pad-back-block: var(--sfx-dd-pad-back-block--set, var(--space-s, 1.25rem));
--sfx-dd-pad-back-inline: var(--sfx-dd-pad-back-inline--set, var(--space-l, 2.5rem));
--sfx-dd-back-border-color: var(--sfx-dd-back-border-color--set, var(--neutral-light, #e5e5e5));
--sfx-dd-back-color-hover: var(--sfx-dd-back-color-hover--set, var(--sfx-dd-link-color-hover)); --sfx-dd-overview-color: var(--sfx-dd-overview-color--set, inherit);
--sfx-dd-overview-font-weight: var(--sfx-dd-overview-font-weight--set, 600); flex: 1 1 auto;
min-inline-size: 0;
min-block-size: 0;
inline-size: 100%;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
background: var(--sfx-dd-bg);
color: var(--sfx-dd-color);
font-size: var(--sfx-dd-font-size);
} .dd__panel {
display: flex;
flex-direction: column;
min-block-size: 0;
background: var(--sfx-dd-bg);
}
.dd__panel--root {
position: relative;
flex: 1 1 auto;
min-block-size: 0; overflow: hidden auto;
}
.dd__panel:not(.dd__panel--root) {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden auto;
visibility: hidden; transform: translateX(100%);
transition:
transform var(--sfx-dd-transition-duration) var(--sfx-dd-transition-easing),
visibility var(--sfx-dd-transition-duration) var(--sfx-dd-transition-easing);
}
.dd__panel.is-open {
visibility: visible;
transform: translateX(0);
}
.dd__list {
list-style: none;
margin: 0;
padding: 0;
}
.dd__item + .dd__item {
border-block-start: var(--sfx-dd-item-border-width) solid var(--sfx-dd-item-border-color);
} .dd__link,
.dd__toggle {
display: flex;
align-items: center;
gap: var(--sfx-dd-item-gap);
padding-block: var(--sfx-dd-pad-item-block);
padding-inline: var(--sfx-dd-pad-item-inline);
color: var(--sfx-dd-link-color);
text-decoration: none;
cursor: pointer;
}
.dd__toggle {
justify-content: space-between;
}
.dd__link,
.dd__toggle,
.dd__back {
transition:
color var(--sfx-dd-hover-transition-duration) var(--sfx-dd-transition-easing),
background-color var(--sfx-dd-hover-transition-duration) var(--sfx-dd-transition-easing);
} .dd__label {
font-family: var(--sfx-dd-font-family);
font-size: var(--sfx-dd-font-size);
font-weight: var(--sfx-dd-font-weight);
letter-spacing: var(--sfx-dd-letter-spacing);
text-transform: var(--sfx-dd-text-transform);
line-height: var(--sfx-dd-line-height);
padding-block: var(--sfx-dd-pad-label-block);
padding-inline: var(--sfx-dd-pad-label-inline);
} .dd__panel--root > .dd__list > .dd__item > .dd__link,
.dd__panel--root > .dd__list > .dd__item > .dd__toggle {
--sfx-dd-link-color: var(--sfx-dd-main-color);
--sfx-dd-font-size: var(--sfx-dd-main-font-size);
--sfx-dd-font-weight: var(--sfx-dd-main-font-weight);
--sfx-dd-link-color-hover: var(--sfx-dd-main-link-color-hover);
}
.dd__panel:not(.dd__panel--root) .dd__item > .dd__link,
.dd__panel:not(.dd__panel--root) .dd__item > .dd__toggle {
--sfx-dd-link-color: var(--sfx-dd-sub-color);
--sfx-dd-font-size: var(--sfx-dd-sub-font-size);
--sfx-dd-font-weight: var(--sfx-dd-sub-font-weight);
--sfx-dd-link-color-hover: var(--sfx-dd-sub-link-color-hover);
}
.dd__link:hover,
.dd__link:focus-visible,
.dd__toggle:hover,
.dd__toggle:focus-visible {
color: var(--sfx-dd-link-color-hover);
background: var(--sfx-dd-link-bg-hover);
}
.dd__item--overview .dd__link {
color: var(--sfx-dd-overview-color);
}
.dd__item--overview .dd__label {
font-weight: var(--sfx-dd-overview-font-weight);
} .dd__item.current-menu-item > .dd__link,
.dd__item.current-menu-item > .dd__toggle,
.dd__item.current-menu-parent > .dd__toggle,
.dd__item.current-menu-ancestor > .dd__toggle {
color: var(--sfx-dd-link-color-current);
}
.dd__item.current-menu-item > .dd__link {
font-weight: 700;
} .dd__chevron {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sfx-dd-chevron);
font-size: var(--sfx-dd-chevron-size);
}
.dd__chevron svg,
.dd__chevron img {
inline-size: 1em;
block-size: 1em;
} .dd__chevron:not(.dd__chevron--back):empty::after {
content: "";
inline-size: var(--sfx-dd-chevron-size);
block-size: var(--sfx-dd-chevron-size);
border-block-start: var(--sfx-dd-chevron-thickness) solid currentColor;
border-inline-end: var(--sfx-dd-chevron-thickness) solid currentColor;
transform: rotate(45deg);
} .dd__back {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding-block: var(--sfx-dd-pad-back-block);
padding-inline: var(--sfx-dd-pad-back-inline);
background: var(--sfx-dd-back-bg);
color: var(--sfx-dd-back-color);
border-block-end: var(--sfx-dd-item-border-width) solid var(--sfx-dd-back-border-color);
font-weight: var(--sfx-dd-back-font-weight);
cursor: pointer;
}
.dd__back:hover,
.dd__back:focus-visible {
color: var(--sfx-dd-back-color-hover);
} .dd__chevron--back {
position: absolute;
inset-block-start: 50%;
inset-inline-start: var(--space-l, 1.25rem);
translate: 0 -50%;
color: var(--sfx-dd-chevron-back);
}
.dd__chevron--back:empty::after {
content: "";
inline-size: var(--sfx-dd-chevron-size);
block-size: var(--sfx-dd-chevron-size);
border-block-start: var(--sfx-dd-chevron-thickness) solid currentColor;
border-inline-end: var(--sfx-dd-chevron-thickness) solid currentColor;
rotate: -135deg;
}
@media (prefers-reduced-motion: reduce) {
.dd__panel:not(.dd__panel--root),
.dd__link,
.dd__toggle,
.dd__back {
transition: none;
}
}