:root {
    --cb-acc-spacing: 1rem;
    --cb-acc-border-radius: 1rem;
    --cb-acc-item-border-top: 0;
    --cb-acc-item-border-bottom: 1px solid lightgrey;

    /* Button */
    --cb-acc-btn-align: inline-start;
    --cb-acc-btn-font-size: inherit;
    --cb-acc-btn-weight: bold;
    --cb-acc-btn-padding-block: 1rem;
    --cb-acc-btn-padding-inline: var(--cb-acc-btn-padding-block);
    --cb-acc-btn-radius: 0;
    --cb-acc-btn-color: #fff;
    --cb-acc-btn-color-active: var(--cb-acc-btn-color);
    --cb-acc-btn-bg: #333;
    --cb-acc-btn-bg-active: var(--cb-acc-btn-bg);

    --cb-acc-btn-border-top: 0;
    --cb-acc-btn-border-right: 0;
    --cb-acc-btn-border-bottom: 1px solid black;
    --cb-acc-btn-border-left: 0;

    /* Icon */
    --cb-acc-icon-size: 1em;
    --cb-acc-icon-thickness: 1px;
    --cb-acc-icon-color: currentcolor;
    --cb-acc-icon-color-active: var(--cb-acc-icon-color);
    --cb-acc-icon-bg: darkgrey;
    --cb-acc-icon-bg-active: var(--cb-acc-icon-bg);

    /* Content */
    --cb-acc-content-padding: 1rem;
    --cb-acc-content-bg: lightgrey;
}

.cb-accordion {
    container: cb-acc-container / inline-size;
}

.cb-accordion__item {
    margin-block-end: var(--cb-acc-spacing);
    border-block-start: var(--cb-acc-item-border-top);
    border-block-end: var(--cb-acc-item-border-bottom);
}

/* Headline & Button */

.cb-accordion__headline {
    position: relative;
    /*z-index: 1;*/
    margin: 0;

    border-radius: var(--cb-acc-btn-radius);
    border-block-start: var(--cb-acc-btn-border-top);
    border-inline-end: var(--cb-acc-btn-border-right);
    border-block-end: var(--cb-acc-btn-border-bottom);
    border-inline-start: var(--cb-acc-btn-border-left);
}

.cb-accordion__btn {
    cursor: pointer;
    position: relative;
    display: block;
    width: 100%;
    font-size: var(--cb-acc-btn-font-size);
    text-align: var(--cb-acc-btn-align);
    font-weight: var(--cb-acc-btn-weight);

    padding-block-start: var(--cb-acc-btn-padding-block);
    padding-inline-end: calc(var(--cb-acc-btn-padding-inline) + var(--cb-acc-icon-size) * 2);
    padding-block-end: var(--cb-acc-btn-padding-block);
    padding-inline-start: var(--cb-acc-btn-padding-inline);

    color: var(--cb-acc-btn-color);
    background: var(--cb-acc-btn-bg);
    border: 0;

    border-radius: var(--cb-acc-border-radius);
}

.cb-accordion__btn.is-active {
    --cb-acc-btn-color: var(--cb-acc-btn-color-active);
    --cb-acc-btn-bg: var(--cb-acc-btn-bg-active);
    --cb-acc-icon-color: var(--cb-acc-icon-color-active);
    --cb-acc-icon-bg: var(--cb-acc-icon-bg-active);

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Icon */

.cb-accordion__icon {
    display: grid;
    place-items: center;
    position: absolute;
    /*isolation: isolate;*/
    border-radius: 100%;
    background: var(--cb-acc-icon-bg);
    translate: 25% -50%;
    inset-inline-end: var(--cb-acc-btn-padding-inline);
    /*inset-block-start: var(--cb-acc-btn-padding-block);*/
    inset-block-start:  50%;
    padding: var(--cb-acc-icon-size);
}

.cb-accordion__icon::after {
    content: '';
    position: absolute;
    display: block;
    width: calc(var(--cb-acc-icon-size) - 15%);
    height: calc(var(--cb-acc-icon-size) - 15%);
    border-inline-end: var(--cb-acc-icon-thickness) solid var(--cb-acc-icon-color);
    border-block-end: var(--cb-acc-icon-thickness) solid var(--cb-acc-icon-color);

    translate: 0 -15%;
    rotate: 45deg;
}

.cb-accordion__btn.is-active  .cb-accordion__icon {
    rotate: -180deg;
}

/* Content */

.cb-accordion__content {
    overflow: clip;
    background: var(--cb-acc-content-bg);
    height: 0;
    transition: height .25s ease-in-out;

    border-bottom-left-radius: var(--cb-acc-border-radius);
    border-bottom-right-radius: var(--cb-acc-border-radius);
}

.cb-accordion__content > div {
    padding: var(--cb-acc-content-padding);
}

.cb-accordion__content > div > *:first-child {
    margin-block-start: 0;
}

.cb-accordion__content > div > *:last-child {
    margin-block-end: 0;
}