:root {
    &:has(#settings-dialog-toggle:checked) {
        body {
            overflow: hidden;
        }

        #settings {
            display: flex;
        }
    }

    --settings-color-mode-box-shadow: inset 0px 0px 1px var(--color-button-text);

    &:has(#color-mode-light:checked) {
        #settings {
            label[for="color-mode-light"] {
                background-color: var(--color-button-active-bg);
                color: var(--color-button-active-text);
                box-shadow: var(--settings-color-mode-box-shadow);
            }
        }
    }

    &:has(#color-mode-dark:checked) {
        label[for="color-mode-dark"] {
            background-color: var(--color-button-active-bg);
            color: var(--color-button-active-text);
            box-shadow: var(--settings-color-mode-box-shadow);
        }
    }

    &:has(#color-mode-auto:checked) {
        label[for="color-mode-auto"] {
            background-color: var(--color-button-active-bg);
            color: var(--color-button-active-text);
            box-shadow: var(--settings-color-mode-box-shadow);
        }
    }
}

#settings-dialog-toggle {
    display: none;
}

#settings {
    display: none;

    justify-content: center;
    align-items: center;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: rgba(3, 3, 3, 0.75);

    > label[backdrop] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        cursor: default;
    }

    > section {
        z-index: 999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--margin-small);

        max-width: var(--max-width);
        max-height: var(--max-width);
        padding: var(--margin-small);
        overflow: auto;

        background-color: var(--color-bg);
        border: 1ch solid var(--color-border);
        border-radius: 0.5em;
        filter: drop-shadow(0px 2px 2px var(--color-border));

        header {
            display: flex;
            justify-content: flex-end;

            label {
                cursor: pointer;
                font-size: 2em;
                line-height: 1em;
            }
        }

        fieldset {
            padding: var(--margin-small);
            > * + *,
            noscript > section {
                margin-top: var(--margin-small);
            }

            > legend + div {
                margin-top: 0;
            }
        }

        buttongroup {
            display: inline-flex;
            > * {
                border-radius: 0;

                &:first-child {
                    border-radius: 0.25rem;
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }
                &:last-child {
                    border-radius: 0.25rem;
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                }
            }
        }

        buttongroup[color-mode] {
            label[for^="color-mode-"] {
                display: block !important;
            }
        }

        footer {
            align-self: flex-end;
        }

        .javascript-enabled {
            display: none;

            &.visible {
                display: block;
            }
        }
    }
}

label[button] {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    background-color: var(--color-button-bg);
    color: var(--color-button-text);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;

    &:hover {
        background-color: var(--color-button-active-bg);
        color: var(--color-button-active-text);
    }
}

label[for="settings-dialog-toggle"] {
    cursor: pointer;
}

alert {
    display: block;
    font-size: 1.25em;

    &[warn] {
        &:before {
            content: "⚠️";
        }
    }
}