:where(.component-accordion) {
    container-type: inline-size;
    container-name: accordion-container;

    :where(& > .component-wrapper) {
        :where(& > .region) {
            container-type: unset !important;
            container-name: unset !important;

            :where(& > .content-wrap) {
                :where(.accordion-items) {
                }
            }
        }
    }
}

:where(.component-accordion) {

    /* The accordion puts its rails on the heading and on each item rather than on
       .content-wrap, so the global .content-max-width-* rule has nothing to act on
       here. Pipe the chosen width through this property instead. Medium is the
       default and small is the only other choice offered; see accordion.docs.yaml. */
    --local-accordion-content-width: var(--content-width-medium);

    &.content-max-width-small {
        --local-accordion-content-width: var(--content-width-small);
    }

    /* The rails center themselves, so the global content placement rule — which acts on
       .content-wrap — has nothing to do here either. Left pulls them to the inline start
       of the region; middle, the default, keeps them centered. */
    --local-accordion-rail-margin: auto;

    &.content-placement-left {
        --local-accordion-rail-margin: 0;
    }

    :where(& > .component-wrapper) {


        :where(& > .region) {
            max-width: calc(var(--local-accordion-content-width) + 8rem);

            :where(& > .content-wrap) {
                max-width: 100%;

                :where(& > .heading-and-copy) {
                    max-width: var(--local-accordion-content-width);
                    margin-inline: var(--local-accordion-rail-margin);

                    :where(.heading) {
                        font-weight: var(--font-weight-semi-bold);
                    }
                }

                :where(.accordion-summary) {
                    position: relative;

                    list-style: none;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 1rem;
                    cursor: pointer;
                    user-select: none;
                    transition: background 0.15s ease;
                    font-size: var(--font-size-h5);
                    font-weight: var(--font-weight-semi-bold);


                    :where(.accordion-icon) {
                        display: inline-flex;
                        flex-shrink: 0;
                        align-items: center;
                        justify-content: center;
                        width: 26px;
                        height: 26px;
                        border-radius: 50%;
                        background-color: var(--color-brand-blue);
                        position: relative;
                        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);

                        &::before,
                        &::after {
                            content: '';
                            position: absolute;
                            background-color: #fff;
                            border-radius: 2px;
                        }

                        &::before {
                            width: 12px;
                            height: 2px;
                        }

                        &::after {
                            width: 2px;
                            height: 12px;
                        }

                        [open] > .accordion-summary > & {
                            background-color: var(--color-brand-blue-tertiary);
                        }

                        [open] > * & {
                            transform: rotate(-45deg);
                        }
                    }
                }

                :where(.accordion-items) {
                    display: grid;
                    column-gap: 5rem;
                    margin-block-start: var(--size-small);

                    :where(hr) {
                        height: 1px;
                        width: 100%;
                        /* Same rail as the items, so the line ends where the questions do. */
                        max-width: var(--local-accordion-content-width);
                        background-color: var(--color-black-20-percent);
                        border: none;
                        margin-block: var(--size-small);
                        margin-inline: var(--local-accordion-rail-margin);
                    }

                    :where(.single-accordion-item) {
                        max-width: var(--local-accordion-content-width);
                        margin-inline: var(--local-accordion-rail-margin);
                        width: 100%;

                        :where(.copy) {
                            margin-block-start: var(--size-small);
                            max-width: var(--content-width-small);
                        }

                        &:last-of-type + hr {
                            display: none;
                        }
                    }

                }
            }
        }
    }
}

@container accordion-container (  inline-size < calc(144rem + 4rem + 4rem)) {
    :where(.component-accordion:not(.documentation-example)) {
        :where(& > .component-wrapper) {
            :where(& > .region) {
                max-width: 100%;
                padding-inline: var(--size-medium);
            }
        }
    }
}