.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;
}
}@layer bricks {.brxe-code{width:100%}}@layer bricks {.brxe-button{width:auto}}@layer bricks {:where(.brxe-heading).has-separator{align-items:center;display:inline-flex;gap:20px}:where(.brxe-heading)>[contenteditable]{display:inline-block;text-decoration:inherit}:where(.brxe-heading) .separator{border-top:1px solid;flex-grow:1;flex-shrink:0;height:1px}}@layer bricks {@keyframes load8{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes scrolling{0%{opacity:1}to{opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px)}}a.brxe-image{display:inline-block}figure.brxe-image{margin:0}:where(.brxe-image).tag{display:inline-block;height:fit-content;position:relative;width:auto}:where(.brxe-image).caption{position:relative}:where(.brxe-image).caption:has(figcaption.bricks-image-caption){overflow:hidden}:where(.brxe-image).overlay{position:relative}:where(.brxe-image).overlay:before{bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}:where(.brxe-image):before{border-radius:inherit}:where(.brxe-image) a{border-radius:inherit;position:static;transition:inherit}:where(.brxe-image) picture{border-radius:inherit;transition:inherit}:where(.brxe-image) img{border-radius:inherit;height:100%;position:static!important;transition:inherit;width:100%}:where(.brxe-image) img.bricks-lazy-hidden+figcaption{display:none}:where(.brxe-image) .icon{color:#fff;font-size:60px;pointer-events:none;position:absolute;right:50%;text-align:center;top:50%;transform:translate(50%,-50%);z-index:5}:where(.brxe-image) .bricks-image-caption{background:linear-gradient(0deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 70%,transparent);bottom:0;color:#fff;font-size:inherit;margin:0;padding:10px 15px;pointer-events:none;position:absolute;text-align:center;width:100%;z-index:1}}