@layer components {

    /* Cookie consent */
    .cookiebar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;
        display: flex;
        width: 100%;
        max-height: calc(100dvh - var(--space-56));
        overflow-y: auto;
        padding: var(--space-28) var(--space-20);
        background-color: var(--color-bg-surface-alt);
        box-shadow: var(--color-black-alpha-08) 0 0 var(--space-4) var(--space-2);
    }

    .cookiebar.hidden {
        display: none;
    }

    .cookiebar-dropdown {
        width: 100%;
    }

    .cookiebar-dropdown-main {
        display: grid;
        gap: var(--space-20);
        align-items: center;
    }

    .cookiebar-dropdown-main.hidden {
        display: none;
    }

    .cookiebar-dropdown-main-left {
        display: grid;
        gap: var(--space-8);
        min-width: 0;
    }

    .cookiebar-dropdown-main-right {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-8);
        width: 100%;
    }

    .cookiebar-preferences-button {
        justify-content: center;
    }

    .cookiebar-dropdown-options {
        display: none;
    }

    .cookiebar-dropdown-options.open {
        display: grid;
        gap: var(--space-20);
    }

    .cookiebar-dropdown-options-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-16);
    }

    .cookiebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 var(--space-36);
        width: var(--space-36);
        height: var(--space-36);
        border: var(--border-width-hairline) solid var(--color-border);
        border-radius: var(--radius-round);
        background: transparent;
        color: var(--color-text);
        cursor: pointer;
        transition: background-color .18s ease, border-color .18s ease, color .18s ease;
    }

    .cookiebar-close:hover,
    .cookiebar-close:focus-visible {
        outline: none;
        border-color: var(--color-border);
        background: var(--color-bg-surface);
    }

    .cookiebar-close__icon.svg-sprite,
    .cookiebar-checkbox__icon.svg-sprite,
    .cookiebar-details-toggle__icon.svg-sprite {
        position: static;
        display: block;
        overflow: visible;
        fill: currentColor;
        pointer-events: none;
    }

    .cookiebar-close__icon {
        width: var(--space-14);
        height: var(--space-14);
    }

    .cookie-dropdown-options-options {
        display: grid;
        gap: var(--space-12);
    }

    .cookiebar-dropdown-options-1,
    .cookiebar-dropdown-options-2,
    .cookiebar-dropdown-options-3,
    .cookiebar-dropdown-options-4-head,
    .cookiebar-dropdown-options-4-extended-vendor {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-16);
    }

    .cookiebar-dropdown-options-1-left,
    .cookiebar-dropdown-options-2-left,
    .cookiebar-dropdown-options-3-left,
    .cookiebar-dropdown-options-4-left {
        min-width: 0;
    }

    .cookiebar-dropdown-options-1 {
        color: var(--color-text-muted);
    }

    .cookiebar-dropdown-options-1 .fw-bold {
        color: inherit;
    }

    .cookiebar-dropdown-options-4-wrapper {
        display: grid;
        gap: var(--space-12);
    }

    .cookiebar-dropdown-options-4-extended {
        display: grid;
        gap: var(--space-12);
        padding-top: var(--space-4);
    }

    .cookiebar-dropdown-options-4-extended.hidden {
        display: none;
    }

    .cookiebar-details-toggle {
        display: inline-flex;
        align-items: center;
        gap: var(--space-4);
        margin-left: var(--space-4);
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--color-link);
        font: inherit;
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
    }

    .cookiebar-details-toggle:hover,
    .cookiebar-details-toggle:focus-visible {
        outline: none;
        color: var(--color-link-hover);
    }

    .cookiebar-details-toggle__icon {
        width: .85em;
        height: .85em;
        transform-origin: center;
        transition: transform .18s ease;
    }

    .cookiebar-details-toggle .cookiebar-details-toggle__icon--up.svg-sprite {
        display: none;
    }

    .cookiebar-details-toggle[aria-expanded="true"] .cookiebar-details-toggle__icon--down.svg-sprite {
        transform: rotate(180deg);
    }

    .cookiebar-details-toggle[aria-expanded="true"] .cookiebar-details-toggle__icon--up.svg-sprite {
        display: none;
    }

    .cookiebar-checkbox {
        position: relative;
        display: inline-grid;
        place-items: center;
        flex: 0 0 var(--space-28);
        width: var(--space-28);
        height: var(--space-28);
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .cookiebar-checkbox.is-disabled {
        cursor: default;
        pointer-events: none;
    }

    .cookiebar-checkbox--button {
        appearance: none;
    }

    .cookiebar-checkbox__input[type="checkbox"] {
        position: absolute;
        inset: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        margin: 0;
        border: 0;
        opacity: 0;
        cursor: pointer;
        appearance: none;
    }

    .cookiebar-checkbox__input[type="checkbox"]:checked,
    .cookiebar-checkbox__input[type="checkbox"]:checked:disabled {
        background: transparent;
    }

    .cookiebar-checkbox__input[type="checkbox"]:checked::before,
    .cookiebar-checkbox__input[type="checkbox"]:checked::after {
        content: none;
        display: none;
    }

    .cookiebar-checkbox__input[type="checkbox"]:disabled {
        cursor: default;
    }

    .cookiebar-checkbox__control {
        display: grid;
        place-items: center;
        width: var(--space-24);
        height: var(--space-24);
        border: var(--border-width-hairline) solid var(--color-brand-primary);
        border-radius: var(--radius-corner);
        background: var(--color-bg-surface);
        color: var(--color-black);
        transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    }

    .cookiebar-checkbox:not(.is-disabled):hover .cookiebar-checkbox__control,
    .cookiebar-checkbox__input[type="checkbox"]:focus-visible + .cookiebar-checkbox__control,
    .cookiebar-checkbox--button:focus-visible .cookiebar-checkbox__control {
        outline: none;
        box-shadow: 0 0 0 .1875rem color-mix(in oklch, var(--color-brand-primary) 26%, transparent);
    }

    .cookiebar-checkbox__input[type="checkbox"]:checked + .cookiebar-checkbox__control,
    .cookiebar-checkbox--button[data-value="checked"] .cookiebar-checkbox__control,
    .cookiebar-checkbox--button[data-value="partial"] .cookiebar-checkbox__control {
        border-color: var(--color-brand-primary);
        background: var(--color-brand-primary);
    }

    .cookiebar-checkbox.is-disabled .cookiebar-checkbox__control {
        border-color: var(--color-border);
        background: color-mix(in oklch, var(--color-bg-surface) 72%, var(--color-bg-surface-alt));
        color: var(--color-text-muted);
        box-shadow: none;
    }

    .cookiebar-checkbox.is-disabled .cookiebar-checkbox__input[type="checkbox"]:checked + .cookiebar-checkbox__control {
        border-color: var(--color-border);
        background: color-mix(in oklch, var(--color-bg-surface) 72%, var(--color-bg-surface-alt));
        color: var(--color-text-muted);
    }

    .cookiebar-checkbox__icon {
        width: var(--space-14);
        height: var(--space-14);
        opacity: 0;
        transform: scale(.78);
        transition: opacity .16s ease, transform .16s ease;
    }

    .cookiebar-checkbox__input[type="checkbox"]:checked + .cookiebar-checkbox__control .cookiebar-checkbox__icon--check,
    .cookiebar-checkbox--button[data-value="checked"] .cookiebar-checkbox__icon--check,
    .cookiebar-checkbox--button[data-value="partial"] .cookiebar-checkbox__icon--minus {
        opacity: 1;
        transform: scale(1);
    }

    .cookiebar-checkbox--button[data-value="partial"] .cookiebar-checkbox__icon--check,
    .cookiebar-checkbox--button[data-value="checked"] .cookiebar-checkbox__icon--minus {
        display: none;
    }

    .cookiebar-options-save {
        justify-self: start;
        width: 100%;
    }

    p+.cookie-block,
    .cookie-block+.cookie-block {
        margin-block: 0;
    }

    .cookie-block {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: var(--space-8);
        margin-block: var(--space-20);
        padding: var(--space-20);
        border-radius: var(--radius-corner);
        background-color: var(--color-bg-surface-alt);
    }

    .cookie-block button.cookie::before {
        margin-right: var(--space-4);
    }

    @media (min-width: 768px) {
        .cookiebar {
            padding: var(--space-32);
        }

        .cookiebar-dropdown-main-right {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .cookiebar-preferences-button {
            grid-column: span 2;
        }

        .cookiebar-options-save {
            width: auto;
        }
    }

    @media (min-width: 1200px) {
        .cookiebar {
            padding: var(--space-40) var(--space-48);
        }

        .cookiebar-dropdown-main {
            grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
        }

        .cookiebar-dropdown-main-right {
            grid-template-columns: 1fr;
            justify-self: end;
        }

        .cookiebar-preferences-button {
            grid-column: auto;
        }

        .cookie-block {
            justify-content: space-between;
            flex-direction: row;
        }
    }
}