@layer components {
    div.sidebar {
        background-color: var(--color--brand--97);
        border-bottom: solid var(--size--border) var(--color--border);
        overflow-x: hidden;
        width: 100%;

        & h2 {
            margin: 0;
            height: 7.63rem;
            display: flex;
            justify-content: center;
            align-items: center;

            font-family: var(--font--title--family--large);
            font-size: var(--font--title--size--large);
            font-weight: var(--font--title--weight--large);
            line-height: var(--font--title--line-height--large);
            letter-spacing: var(--font--title--letter-spacing--large);
            text-transform: var(--font--title--casing--large);
        }

        & button:not(.link) {
            max-width: none;
            width: 100%;
        }
      
        &.view {
            overflow-y: auto;
            padding: var(--space-xl) var(--space-m) var(--space-m);

            & span.status {
                display: block;
                margin-bottom: var(--space-xl);

                font-family: var(--font--title--family--large);
                font-size: var(--font--title--size--large);
                font-weight: var(--font--title--weight--large);
                line-height: var(--font--title--line-height--large);
                letter-spacing: var(--font--title--letter-spacing--large);
                text-transform: var(--font--title--casing--large);

                &.overdue {
                    color: var(--color--danger);
                }
            } 

            h4 {
                padding-bottom: var(--space-xs);
                border: none;
                border-bottom: solid var(--size--border) var(--color--border);

                font-family: var(--font--title--family--xxsmall--all-caps);
                font-size: var(--font--title--size--xxsmall--all-caps);
                font-weight: var(--font--title--weight--xxsmall--all-caps);
                line-height: var(--font--title--line-height--xxsmall--all-caps);
                letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
                text-transform: var(--font--title--casing--xxsmall--all-caps);
            }

            div.subsection {
                margin-bottom: var(--space-l);
            }

            div.manage {
                display: flex;
                flex-direction: column;
            }

            section {
                margin-bottom: 0;
            }

            &:has(input[name=paymentMethod][value=wireTransfer]:checked) {
                & .wireExtra {
                    display: block;
                }

                & button.pay {
                    display: none;
                }

                & button.mark {
                    display: block;
                }
            }

            &:has(input[name=paymentMethod][value=check]:checked) {
                & .checkExtra {
                    display: block;
                }

                & button.pay {
                    display: none;
                }

                & button.mark {
                    display: block;
                }
            }

            &:has(input[name=paymentMethod][value=other]:checked) {
                & .otherExtra {
                    display: block;
                }

                & button.pay {
                    display: none;
                }

                & button.mark {
                    display: block;
                }
            }

            &:has(input[name=paymentMethod]:not([value=other]):not([value=check]):not([value=wireTransfer]):checked) {
                & button.pay {
                    display: block;
                }
            }

            button {
                margin-top: var(--space-xs);

                &:has(+ h4) {
                    margin-bottom: var(--space-xs);
                }
            }

            & .checkExtra, & .otherExtra, & .wireExtra, & button.mark, & button.pay {
                display: none;
            }

            & p {
                font-family: var(--font--caption--family--small);
                font-size: var(--font--caption--size--small);
                font-weight: var(--font--caption--weight--small);
                line-height: var(--font--caption--line-height--small);
                letter-spacing: var(--font--caption--letter-spacing--small);
                text-transform: var(--font--caption--casing--small);

                margin-bottom: var(--space-m);

                &:has(+ button) {
                    margin-bottom: var(--space-2xs);
                }

                a {
                    text-decoration: underline;
                }
            }

            & div.inline-field {
                margin-top: 0;
                margin-bottom: var(--space-xs);
                grid-template-columns: min-content 1fr;

                & label.spaceBetween {
                    grid-column: 2 / -1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
            }

            & div.checkAddress {
                font-family: var(--font--title--family--xsmall);
                font-size: var(--font--title--size--xsmall);
                font-weight: var(--font--title--weight--xsmall);
                line-height: var(--font--title--line-height--xsmall);
                letter-spacing: var(--font--title--letter-spacing--xsmall);
                text-transform: var(--font--title--casing--xsmall);

                font-weight: 500;

                margin-bottom: var(--space-l);

                & div {
                    margin-block: var(--space-3xs);
                }
            }

            & div.payment-methods {
                margin-bottom: var(--space-l);
            }

            & summary > div.event {
                display: inline-flex;
            }

            & div.event {
                display: flex;
                justify-content: space-between;

                font-family: var(--font--caption--family--small);
                font-size: var(--font--caption--size--small);
                font-weight: var(--font--caption--weight--small);
                line-height: var(--font--caption--line-height--small);
                letter-spacing: var(--font--caption--letter-spacing--small);
                text-transform: var(--font--caption--casing--small);
            }
        }

        &.invoice {
            & h2 {
                flex-grow: 0;
                flex-shrink: 0;
            }

            & div.controls {
                display: grid;
                grid-template-columns: 1fr 1fr;
                padding: var(--space-2xs);
                column-gap: var(--space-2xs);

                border-top: solid var(--size--border) var(--color--border);

                & button, a {
                    min-width: 0;
                    display: flex;
                    justify-content: center;

                    & svg path {
                        fill: var(--color--brand--white);
                    }
                }
            }

            & a.sidebar-section-header {
                &:active, &:visited, &:hover {
                    color: var(--color--brand--30);
                }

                display: flex;
                padding: var(--space-m);
                border-top: solid var(--size--border) var(--color--border);
                text-align: left;
                position: relative;
                height: 2.63rem;
                justify-content: space-between;
                align-items: center;

                text-decoration: none;

                outline: none;

                font-family: var(--font--title--family--xxsmall--all-caps);
                font-size: var(--font--title--size--xxsmall--all-caps);
                font-weight: var(--font--title--weight--xxsmall--all-caps);
                line-height: var(--font--title--line-height--xxsmall--all-caps);
                letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
                text-transform: var(--font--title--casing--xxsmall--all-caps);

                &::after {
                    display: block;
                    width: 1rem;
                    height: 1rem;
                    background-color: var(--color--brand--70);
                    content: "";
                    mask-position: center;
                    mask-size: contain;
                    mask-repeat: no-repeat;
                }


                &.close {
                    display: none;

                    &::after {
                        mask-image: var(--icon--up);
                    }

                    &:target, &.active {
                        display: flex;
                        background-color: var(--color--brand--90);

                        & + section {
                            overflow-y: auto;
                            display: block;
                            flex-grow: 1;
                            flex-shrink: 1;
                            height: auto;
                            scroll-margin-top: 100px;
                        }
                    }
                }

                &.open {
                    &::after {
                        mask-image: var(--icon--down);
                    }

                    &:has(+ .close:target) {
                        display: none;
                    }
                }
            }

            & section {
                overflow: hidden;
                border-top: solid var(--size--border) var(--color--border);
                transition: height 0.5s ease;
                flex-grow: 0;
                height: 0px;
                interpolate-size: allow-keywords;
                display: none;
                scroll-margin-top: 100px;
                margin-bottom: 0;

                &.active {
                    overflow-y: auto;
                    display: block;
                    flex-grow: 1;
                    flex-shrink: 1;
                    height: auto;
                    scroll-margin-top: 100px;
                }

                & h3 {
                    padding-bottom: var(--space-xs);
                    margin-block: var(--space-3xs) var(--space-s);
                    border-bottom: solid var(--size--border) var(--color--brand--90);

                    font-family: var(--font--title--family--xxsmall--all-caps);
                    font-size: var(--font--title--size--xxsmall--all-caps);
                    font-weight: var(--font--title--weight--xxsmall--all-caps);
                    line-height: var(--font--title--line-height--xxsmall--all-caps);
                    letter-spacing: var(--font--title--letter-spacing--xxsmall--all-caps);
                    text-transform: var(--font--title--casing--xxsmall--all-caps);
                }

                & > div {
                    padding: var(--space-s) var(--space-m);
                }

                &#design div.subsection {
                    display: flex;
                    width: 100%;
                    overflow-y: auto;
                    justify-content: center;
                    position: relative;
                    z-index: 1;
                    background-color: var(--color--brand--97);
                    column-gap: var(--space-m);
                }

                & button.themeOption {
                    background: none;
                    border-radius: 0;
                    border: none;
                    display: flex;
                    flex-direction: column;
                    height: auto;
                    color: var(--color--brand--20);
                    flex-shrink: 1;
                    min-width: 0;
                    position: relative;
                    padding: 0;

                    & span {
                        background: none;
                        margin-bottom: var(--span-xs);
                        position: relative;
                        margin-bottom: var(--space-xs);
                    }

                    & svg {
                        display: block;
                        height: 8.5rem;
                        width: auto;
                        background-color: none;
                        border: solid var(--size--border) var(--color--border);
                        position: relative;
                        z-index: -1;
                    }

                    div.overlay {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        background-color: var(--color--text--primary);
                        mix-blend-mode: screen;
                        z-index: 1;
                        top: 0;
                    }

                    &.checked {
                        & span {
                            display: block;
                            box-shadow: inset 0 0 0 0.25rem var(--color--brand--highlight);
                        }
                    }
                }

                & p.larger {
                    font-family: var(--font--caption--family--medium);
                    font-size: var(--font--caption--size--medium);
                    font-weight: var(--font--caption--weight--medium);
                    line-height: var(--font--caption--line-height--medium);
                    letter-spacing: var(--font--caption--letter-spacing--medium);
                    text-transform: var(--font--caption--casing--medium);
                }
            }

            @media screen and (min-width: 1000px) {
                overflow: hidden;
                border-bottom: none;

                & div.sidebar-sections {
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    flex-shrink: 1;
                    flex-grow: 1;
                }

                &:not(:has(:target)) a.sidebar-section-header:nth-last-child(-n+1 of .open) {
                    border-bottom: solid var(--size--border) var(--color--border);
                }

                & h2 {
                    font-family: var(--font--title--family--large);
                    font-size: var(--font--title--size--large);
                    font-weight: var(--font--title--weight--large);
                    line-height: var(--font--title--line-height--large);
                    letter-spacing: var(--font--title--letter-spacing--large);
                    text-transform: var(--font--title--casing--large);
                }
            }
        }
    }

    @media screen and (min-width: 1000px) {
        div.sidebar {
            overflow-y: hidden;
            background-color: var(--color--brand--97);
            border-left: solid var(--size--border) var(--color--border);
            display: flex;
            flex-direction: column;

            & section {
                overflow-y: auto;
                flex-grow: 1;
                flex-shrink: 1;
            }

            &.view {
                border-bottom: none;
            }

            &.invoice {
                section#design div.subsection {
                    display: block;
                    overflow-x: hidden;

                    & button {
                        margin: 0 auto var(--space-m);

                        svg {
                            width: 100%;
                            /* max-width: 12rem; */
                            height: auto;
                        }

                        &.checked span {
                            box-shadow: inset 0 0 0 0.25rem var(--color--brand--highlight);
                        }
                    }
                }
            }
        }
    }
}