.accordions {
    border: solid 1px var(--color--border);
    border-radius: 8px;
    overflow: hidden;
}

.accordion {
    --duration: 0.3s;
    --icon-transform: rotate(90deg);
}

.accordion + .accordion {
    border-top: solid 1px var(--color--border);
}

.accordion__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 1em 1.25em;
    cursor: pointer;
    background-color: color-mix(in srgb, var(--color--border), transparent 75%);
}

.accordion__title:focus-visible {
    outline: solid 2px var(--color--focus);
    outline-offset: -3px;
}

.accordion__title::-webkit-detail-marker {
    display: none;
}

@media (any-hover: hover) {
    .accordion__title:hover {
        background-color: color-mix(in srgb, var(--color--border), transparent 50%);
    }
}

.accordion__title::after {
    content: "";
    display: block;

    width: 1em;
    height: 1em;
    background-color: currentColor;
    clip-path: polygon(
        calc(35% + 4%) calc(10% - 4%),
        calc(75% + 4% * 2) 50%,
        calc(35% + 4%) calc(90% + 4%),
        calc(35% - 4%) calc(90% - 4%),
        calc(75% - 4% * 2) 50%,
        calc(35% - 4%) calc(10% + 4%)
    );
    transform: var(--icon-transform);
    transition: transform var(--duration);
}

.accordion[open] {
    --icon-transform: rotate(270deg);
}

.accordion__content {
    padding: 1.25em;
}

/* css animation */
.accordion--animation .accordion__content {
    padding-block: 0em;
    padding-inline: 1.25em;
}
.accordion--animation .accordion__content::before,
.accordion--animation .accordion__content::after {
    content: "";
    display: block;
    width: 100%;
    height: 1.25em;
}

@supports selector(details::details-content) {
    .accordion--animation::details-content {
        display: grid;
        transition-duration: var(--duration);
        transition-property: content-visibility, grid-template;
        transition-behavior: allow-discrete;

        grid-template-rows: 0fr;
    }

    .accordion[open]::details-content {
        grid-template-rows: 1fr;
    }

    .accordion--animation .accordion__content {
        overflow: hidden;
    }
}