:root {
    --black: oklch(0.26 0.01 0);
    --turqoise: oklch(0.8 0.11 207.95);

    --tl-text-base: var(--black);
    --tl-surface-brand: var(--turqoise);
    --tl-spacing-xs: .5rem;
    --tl-spacing-sm: .75rem;
    --tl-spacing-md: 1rem;
    --tl-spacing-lg: 1.5rem;
    --tl-spacing-xl: 2rem;
}

/* ==========================================================================
   Details
   ========================================================================== */
details {
    --details-color: var(--tl-text-base);
    --details-background: transparent;
    --details-border: 1px solid;
    --details-border-color: transparent;
    --details-radius: 0;
    --details-div-padding-inline: var(--tl-spacing-lg);
    --details-div-padding-block: 0 var(--tl-spacing-sm);
    --details-div-color: currentcolor;
    --details-summary-padding-inline: var(--tl-spacing-sm);
    --details-summary-padding-block: var(--tl-spacing-xs);
    --details-summary-color: currentcolor;
    --details-summary-background: var(--tl-surface-brand);
    --details-summary-open-color: currentcolor;
    --details-transition-duration: 500ms;
    color: var(--details-color);
    background: var(--details-background);
    border: var(--details-border) var(--details-border-color);
    border-radius: var(--details-radius);
}

details::details-content {
    block-size: 0;
    overflow-y: clip;
    opacity: 0;
    transition-behavior: allow-discrete;
    transition: content-visibility var(--details-transition-duration) allow-discrete 0ms, opacity var(--details-transition-duration) cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms, block-size var(--details-transition-duration) cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}

@media (prefers-reduced-motion: reduce) {
    details::details-content {
        transition-duration: 0ms;
    }
}

@media (prefers-reduced-motion: no-preference) {
    details {
        interpolate-size: allow-keywords;
    }
}

details[open]::details-content {
    block-size: auto;
    opacity: 1;
}

details[open] > summary {
    color: var(--details-summary-open-color);
}

details[open] > summary::before {
    transform: rotate(90deg);
}

details > div {
    padding-block: var(--details-div-padding-block);
    padding-inline: var(--details-div-padding-inline);
    color: var(--details-div-color);
}

details > summary {
    display: flex;
    align-items: center;
    gap: var(--tl-spacing-xs);
}

details > summary > .button{
    padding-block: var(--details-summary-padding-block);
    padding-inline: var(--details-summary-padding-inline);
    color: var(--details-summary-color);
    background: var(--details-summary-background);
    border-radius: var(--tl-spacing-xl);
    text-align: left;
    list-style: none;
    cursor: pointer;
    transition: color var(--details-transition-duration) cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}

details > summary::before {
    content: " ";
    display: block;
    inline-size: var(--tl-spacing-lg);
    block-size: var(--tl-spacing-lg);
    transition: transform var(--details-transition-duration) cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
    background-image: url("data:image/svg+xml,%3Csvg style='fill: %23f00;' xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='m8.069 23.498 10.286-10.286c.67-.669.67-1.755 0-2.424L8.069.502a1.716 1.716 0 0 0-2.424 0 1.716 1.716 0 0 0 0 2.424L14.719 12l-9.074 9.074a1.716 1.716 0 0 0 0 2.424 1.716 1.716 0 0 0 2.424 0Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::marker {
    content: "";
}