.panel-icon::after {
content: "+";
font-family: var(--font-sans, Noto Sans);
font-weight: 600;
font-size: 2.3475rem;
line-height: 0;
}
details[open] > summary .panel-icon::after {
content: "–";
} .helen-accordion-item {
display: block;
interpolate-size: allow-keywords;
}
.helen-accordion-item::details-content {
block-size: 0;
overflow: hidden;
transition: block-size 0.3s, content-visibility 0.3s allow-discrete;
}
.helen-accordion-item[open]::details-content {
block-size: auto;
} .helen-accordion-item + .helen-accordion-item {
border-block-start: var(--panel-border-width) solid var(--color-surface-hero);
}
.helen-accordion-item__header {
display: flex;
gap: var(--space-2xs);
justify-content: space-between;
align-items: center;
cursor: pointer;
list-style: none;
}
.helen-accordion-item__header::-webkit-details-marker {
display: none;
}
.helen-accordion-item__title,
.helen-accordion-item__content p {
margin: 0;
} .helen-accordion-item__title {
flex: 1 1 auto;
}
.helen-accordion-item__icon {
display: inline-flex;
flex: 0 0 auto;
justify-content: flex-end;
align-items: center;
} .helen-accordion-item__motif {
display: none;
} .helen-accordion-item__filter {
position: absolute;
inline-size: 0;
block-size: 0;
overflow: hidden;
}
@media (min-width: 1200px) {
.e-con:has(> .panel > .helen-accordion-item) {
isolation: isolate;
}
.helen-accordion-item__motif {
display: block;
position: absolute;
z-index: -1;
inset-block-start: -71.1px;
inset-inline-start: calc(100% - 255.7px);
inline-size: 459px;
block-size: 443px;
max-inline-size: none;
object-fit: contain;
filter: url(#helen-motif-white);
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.helen-accordion-item[open] .helen-accordion-item__motif {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.helen-accordion-item::details-content,
.helen-accordion-item__motif {
transition: none;
}
}