.component-accordion {
    --accordion-icon-width: 1.8rem;
}

.component-accordion .single-accordion-item {
    border-bottom: 1px solid var(--color-starter-theme-light-black);
}

.component-accordion summary {
    list-style: none;
    font-weight: var(--font-weight-h1);
    padding-block: 2rem;
    user-select: none;
    cursor: pointer;
}

.component-accordion summary::-webkit-details-marker {
    display: none;
}

.component-accordion .accordion-controls {
    display: none;
    gap: 1rem;
}

.component-accordion[data-expand-collapse-available] .accordion-controls {
    display: flex
}

.component-accordion .accordion-controls button {
    background: none;
    border: 1px solid var(--color-starter-theme-light-black);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 1rem 2rem;
}

.component-accordion .single-accordion-item > * {
    display: grid;
    grid-template-columns: var(--accordion-icon-width) 1fr;
    column-gap: 1rem;
}

/* This ensures that the copy of the accordion aligns with the headline in the summary */
.component-accordion .single-accordion-item > :not(summary) > * {
    grid-column: 2;
}

.component-accordion .expand-collapse-single-item svg {
    width: var(--accordion-icon-width);
}

.component-accordion .expand-collapse-single-item svg path {
    stroke: var(--color-starter-theme-primary);
    transition: all 0.25s ease;
}

.component-accordion details[open] .expand-collapse-single-item svg {
    transition: all 0.25s ease;
}

.component-accordion details[open] .expand-collapse-single-item svg path {
    stroke: var(--color-starter-theme-secondary);
}

.component-accordion details[open] .expand-collapse-single-item svg .h-line {
    opacity: 0;
}

.component-accordion details[open] .expand-collapse-single-item svg {
    rotate: 90deg;
    rotation-point: center;
}