.toggle {
    border: var(--border-thickness) solid var(--text);
    border-radius: calc( 2.5rem / 2 );
    width: 4.5rem;
    height: 2.5rem;
    appearance: none;
    -webkit-appearance: none;
    padding: 0;
    transition: transform 0.07s;
    cursor: pointer;
}

.toggle::after {
    content: "";
    display: inline-block;
    margin: 0.2rem;
    border-radius: 50%;
    width: 1.7rem;
    height: 1.7rem;
    background: var(--text);
    transition: transform 0.07s linear;
}

.toggle:checked::after {
    transform: translateX(2rem);
}

.toggle:hover {
    transform: scale(1.04);
}

.toggle:focus {
    padding: 0;
}