@layer utilities {
    .collapse:not(td,tr,colgroup) {
        visibility: revert-layer;
    }


    @layer collapse.l1.l2.l3 {
        .collapse {
            --collapse-border-color: var(--border-neutral-secondary, transparent);
            --collapse-bg: var(--bg-neutral-primary);
            --collapse-color: var(--text-neutral-primary);
            --collapse-padding: 24px;
            --collapse-arrow-width: 40px;
            isolation: isolate;
            grid-template-rows:max-content 0fr;
            grid-template-columns:minmax(0, 1fr);
            width: 100%;
            display: grid;
            position: relative;
            overflow: hidden;

            color: var(--collapse-color);
        }
        /*.collapse:not(.collapse-list) {*/
        /*    */
        /*}*/

        .collapse:not(.collapse .collapse) {
            margin-bottom: 12px;
            &:not(.collapse-list) {
                padding-left: var(--collapse-padding, 24px);
                padding-right: var(--collapse-padding, 24px);
                border: 1px solid var(--collapse-border-color);
                border-radius: 8px;
                background-color: var(--collapse-bg);
            }
        }

        .collapse-list:not(.collapse .collapse) {
            row-gap: 12px;
            > .collapse-title,
            > .collapse-content {
                padding-left: var(--collapse-padding, 24px);
                padding-right: var(--collapse-padding, 24px);
                border: 1px solid var(--collapse-border-color);
                border-radius: 8px;
            }
        }

        .collapse-content > .collapse ~ .collapse {
            border-top: 1px solid var(--collapse-border-color);
            /*margin-top: 24px;*/
            /*padding-top: 24px;*/
        }


        .collapse.collapse-arrow {
            --collapse-arrow-bg: var(--bg-neutral-primary);

            &.collapse-list {
                --collapse-arrow-bg: var(--bg-brand-y-primary);
            }
        }


        @media (prefers-reduced-motion: no-preference) {
            .collapse {
                transition: grid-template-rows .2s, background-color .2s ease-out;
            }
        }

        .collapse > input:is([type=checkbox],[type=radio]) {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            opacity: 0;
            grid-row-start: 1;
            grid-column-start: 1;
        }

        .collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)),
        .collapse:not(.collapse-close):has(>input:is([type=checkbox],[type=radio]):checked) {
            grid-template-rows:max-content 1fr;


            &:not(.collapse-list),
            &.collapse-list .collapse-content {
                --collapse-bg: var(--bg-neutral-secondary);
            }

        }

        .collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)) > .collapse-content,
        .collapse:not(.collapse-close) > :where(input:is([type=checkbox],[type=radio]):checked~.collapse-content) {
            content-visibility: visible;
            min-height: -moz-fit-content;
            min-height: fit-content;
            color: var(--text-neutral-secondary);
        }
        .collapse:not(.collapse .collapse):is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)) > .collapse-content,
        .collapse:not(.collapse .collapse):not(.collapse-close) > :where(input:is([type=checkbox],[type=radio]):checked~.collapse-content) {
            padding-top: var(--collapse-padding, 24px);
            border-block-start: 1px solid var(--collapse-border-color);
        }

        @supports not (content-visibility:visible) {
            .collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)) > .collapse-content,
            .collapse:not(.collapse-close) > :where(input:is([type=checkbox],[type=radio]):checked~.collapse-content) {
                visibility: visible;
            }
        }

        .collapse:focus-visible, .collapse:has(>input:is([type=checkbox],[type=radio]):focus-visible), .collapse:has(summary:focus-visible) {
            outline-color: var(--focus);
            outline-offset: 2px;
            outline-width: 2px;
            outline-style: solid;
        }

        .collapse:not(.collapse-close) > input[type=checkbox], .collapse:not(.collapse-close) > input[type=radio]:not(:checked), .collapse:not(.collapse-close) > .collapse-title {
            cursor: pointer;
        }

        .collapse[tabindex]:focus:not(.collapse-close,.collapse[open]) > .collapse-title, .collapse[tabindex]:focus-within:not(.collapse-close,.collapse[open]) > .collapse-title {
            cursor: unset;
        }

        .collapse:is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)) > :where(.collapse-content),
        .collapse:not(.collapse-close) > :where(input:is([type=checkbox],[type=radio]):checked~.collapse-content) {
            //padding-bottom: 24px;
        }
        .collapse:not(.collapse .collapse):is([open],[tabindex]:focus:not(.collapse-close),[tabindex]:focus-within:not(.collapse-close)) > :where(.collapse-content),
        .collapse:not(.collapse .collapse):not(.collapse-close) > :where(input:is([type=checkbox],[type=radio]):checked~.collapse-content) {
            padding-bottom: 24px;
        }

        .collapse > input:is([type=checkbox],[type=radio]) {
            z-index: 1;
            padding: 1rem;
            width: 100%;
            min-height: 1lh;
            padding-inline-end: 64px;
            transition: background-color .2s ease-out;
        }
    }
    @layer collapse.l1.l2 {
        @media (prefers-reduced-motion: no-preference) {
            .collapse[open].collapse-arrow > .collapse-title:after {
                transform: translateY(-50%) rotate(180deg);
            }
        }
        @media (prefers-reduced-motion: no-preference) {
            .collapse.collapse-open.collapse-arrow > .collapse-title:after {
                transform: translateY(-50%) rotate(180deg);
            }
        }
        .collapse[tabindex].collapse-arrow:focus:not(.collapse-close) > .collapse-title:after, .collapse.collapse-arrow[tabindex]:focus-within:not(.collapse-close) > .collapse-title:after {
            transform: translateY(-50%) rotate(180deg);
        }

        .collapse.collapse-arrow:not(.collapse-close) > input:is([type=checkbox],[type=radio]):checked ~ .collapse-title:after {
            transform: translateY(-50%) rotate(180deg);
        }
    }
    @layer collapse.l1.l2.l3 {
        .collapse-title, .collapse-content {
            grid-row-start: 1;
            grid-column-start: 1;
        }
    }
    @layer collapse.l1.l2.l3 {
        .collapse-content {
            content-visibility: hidden;
            min-height: 0;
            cursor: unset;
            grid-row-start: 2;
            grid-column-start: 1;
        }

        .collapse-content p:first-child {
            margin-top: 0;
        }
        .collapse-content p:last-child {
            margin-bottom: 0;
        }

        @supports not (content-visibility:hidden) {
            .collapse-content {
                visibility: hidden;
            }
        }
        @media (prefers-reduced-motion: no-preference) {
        .collapse-content {
            transition: content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out;
        }
    }
    }
    @layer collapse.l1.l2.l3 {
        .collapse:is(details) {
            width: 100%;
        }

        @media (prefers-reduced-motion: no-preference) {
            .collapse:is(details)::details-content {
                transition: content-visibility .2s allow-discrete, visibility .2s allow-discrete, min-height .2s ease-out allow-discrete, padding .1s ease-out 20ms, background-color .2s ease-out, height .2s;
                interpolate-size: allow-keywords;
                height: 0;
            }

            .collapse:is(details):where([open])::details-content {
                height: auto;
            }
        }
        .collapse:is(details) summary {
             display: block;
             position: relative;
         }

        .collapse:is(details) summary::-webkit-details-marker {
            display: none;
        }

        .collapse:is(details) > .collapse-content {
            content-visibility: visible;
        }
    }
    @layer collapse.l1.l2.l3 {
        .collapse:is(details) summary {
            outline: none;
        }
    }
    @layer collapse.l1.l2 {
        .collapse-arrow.collapse-list:not(.collapse .collapse) > .collapse-title{
            padding-right: calc(var(--collapse-padding, 24px) + var(--collapse-arrow-width, 40px) + 1px);
            &:after, &:before {
                 inset-inline-end: var(--collapse-padding, 24px);
            }
        }
        .collapse-arrow > .collapse-title {
            &:after, &:before {
                pointer-events: none;
                aspect-ratio: 1/1;
                display: block;
                position: absolute;
                inset-inline-end: 0;
                top: 50%;
                transform: translateY(-50%) rotate(0deg);
            }
            &:after {
                font-family: var(--font-material-icon-outlined);
                font-size: 24px;
                content: "\e313";
                width: 40px;
                text-align: center;
                vertical-align: middle;
                display: flex;
                justify-content: center;
                align-items: center;
                /*inset-inline-end: 32px;*/
                /*transform-origin: 75% 75%;*/
            }
            &:before {
                content: "";
                width: 40px;
                background-color: var(--collapse-arrow-bg, #fff);
                border: 1px solid var(--collapse-border-color, transparent);
                border-radius: 4px;
            }
        }
        /*.collapse-arrow > .collapse-title:before {*/
        /*    top: 50%;*/
        /*    content: "";*/
        /*    transform-origin: 75% 75%;*/
        /*    pointer-events: none;*/
        /*    width: 40px;*/
        /*    aspect-ratio: 1/1;*/
        /*    display: block;*/
        /*    position: absolute;*/
        /*    inset-inline-end: 1.4rem;*/
        /*    background-color: var(--bg-brand-y-primary);*/
        /*    transform: translateY(-100%);*/
        /*}*/

        @media (prefers-reduced-motion: no-preference) {
            .collapse-arrow > .collapse-title:after {
                transition-property: all;
                transition-duration: .2s;
                transition-timing-function: cubic-bezier(.4, 0, .2, 1);
            }
        }
    }
    @layer collapse.l1.l2.l3 {
        .collapse-title {
            width: 100%;
            padding-inline-end: 3rem;
            transition: background-color .2s ease-out;
            position: relative;
            padding-top: 24px;
            padding-bottom: 24px;

            font-family: var(--font-sans-serif);
            font-weight: 700;
            font-size: 14px;
            line-height: 140%;
            letter-spacing: 1%;
        }

        .collapse.collapse-list:not(.collapse .collapse) > .collapse-title {
            font-family: var(--font-sans-serif);
            font-weight: 600;
            font-size: 20px;
            line-height: 130%;
            letter-spacing: -1%;
        }

        .collapse.collapse-list .collapse-content {
            background-color: var(--collapse-bg);
        }
    }
    @layer collapse.l1.l2 {
        .collapse-open {
            grid-template-rows:max-content 1fr;
        }

        .collapse-open > .collapse-content {
            content-visibility: visible;
            min-height: -moz-fit-content;
            min-height: fit-content;
            padding-bottom: 1rem;
        }

        @supports not (content-visibility:visible) {
            .collapse-open > .collapse-content {
                visibility: visible;
            }
        }
    }
}