.c-toggle-wrapper {
    --toggle-width: 3.25rem;
    --toggle-height: 1.75rem;
    --toggle-padding: 0.2rem;
    --toggle-animation-duration: 0.2s;
    --toggle-background-color-hover: #cecef5;
    --toggle-background-color-checked: #231c2d;
    --toggle-background-color-focus: #f9dce7;
    --toggle-border-color-focus: #ffa0c4;

    position: absolute;
    right: 1rem;
    top: 0.75rem;
}

.c-toggle {
    align-items: center;
    border-radius: 50em;
    display: flex;
    flex-shrink: 0;
    height: var(--toggle-height);
    padding: var(--toggle-padding) 0;
    position: relative;
    width: var(--toggle-width);
}

.c-toggle__input,
.c-toggle__label {
    left: 0;
    position: absolute;
    top: 0;
}

.c-toggle__input {
    height: 0;
    margin: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    transition: background-color var(--toggle-animation-duration);
    width: 0;
}

.c-toggle__input:checked + .c-toggle__label {
    background-color: var(--toggle-background-color-checked);
}

.c-toggle__input:checked + .c-toggle__label + .c-toggle__marker {
    left: calc(100% - var(--toggle-height) + var(--toggle-padding));
}

.c-toggle__input:checked + .c-toggle__label + .c-toggle__marker::after {
    content: '🌒';
}

.c-toggle__input:focus + .c-toggle__label,
.c-toggle__input:active + .c-toggle__label {
    background-color: var(--toggle-background-color-focus);
    border: 2px solid var(--toggle-border-color-focus);
}

.c-toggle__label {
    background-color: var(--toggle-background-color-hover);
    border-radius: inherit;
    color: transparent;
    font-size: 0;
    height: 100%;
    transition: background var(--toggle-animation-duration);
    user-select: none;
    width: 100%;
    z-index: 2;
}

.c-toggle__marker {
    align-items: center;
    display: flex;
    height: calc(var(--toggle-height) - var(--toggle-padding) * 2);
    justify-content: center;
    left: var(--toggle-padding);
    pointer-events: none;
    position: relative;
    transition: left var(--toggle-animation-duration);
    width: calc(var(--toggle-height) - var(--toggle-padding) * 2);
    will-change: left;
    z-index: 2;
}

.c-toggle__marker::after {
    content: '🌞';
}