*,
::before,
::after {
    transition: background-color 0.2s, color 0.2s;
}

:root {
    --color-back: light-dark(#ffffff, #000000);
    --color-text: light-dark(#000000, #ffffff);
}

body {
    display: grid;
    margin: 0;
    min-block-size: 100svh;
    place-content: center;
    background-color: var(--color-back);
    font-size: 24px;
    font-family: system-ui, sans-serif;
}

.scheme-switcher {
    display: flex;
    padding: 0.125em;
    width: fit-content;
    border: 0.125em solid var(--color-text);
    border-radius: calc(infinity * 1px);
}

.scheme-switcher__button {
    margin: 0;
    padding-block: 0.25em;
    padding-inline: 0.5em;
    border: none;
    border-radius: calc(infinity * 1px);
    background-color: transparent;
    cursor: pointer;
    color: var(--color-text);
    font: inherit;

    &[aria-pressed='true'] {
        background-color: var(--color-text);
        color: var(--color-back);
    }
}