dark-mode {
    all: unset;
    display: grid;
    align-content: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    top: unset;
    z-index: 999;
    height: 3rem;
    width: 3rem;
    background: var(--content);
    margin: 1rem;
    border-radius: 5rem;
    padding: .25rem;
    cursor: pointer;
    border: 1px solid var(--red);

    &::before,
    &::after {
        grid-column: 1;
        grid-row: 1;
        display: inline-block;
        aspect-ratio: 1;
        border-radius: 5rem;
        font-size: 1.5rem;
        transition: opacity .3s ease;
    }

    &::before {
        content: '🔆';
        opacity: 0;
    }

    &::after {
        content: '🌙';
        opacity: 1;
    }
}

body.dark-mode {
    dark-mode {
        &::before {
            opacity: 1;
        }

        &::after {
            opacity: 0;
        }
    }
}