.container {
    cursor: pointer;

    &:active {
        .toggle {
            transform: translateY(-50%) scaleX(1.2);
        }
    }

    &:hover {
        .switch {
            background-color: var(--neutral-solid-strong);
        }
        
        .switch.checked {
            background-color: var(--brand-solid-strong);
        }

        .switch.checked .toggle::before {
            display: none;
        }
    }
}

.reverse {
    flex-direction: row-reverse;
}

.switch {
    box-shadow: inset 0 0 0 var(--solid-inset-color-brand);
    border-color: var(--solid-border-color-neutral);
    border-style: solid;
    border-width: var(--solid-border-width);
    width: var(--static-space-40);
    min-width: var(--static-space-40);
    height: var(--static-space-24);
    border-radius: var(--radius-l-nest-4);
    background-color: var(--neutral-solid-medium);
    position: relative;
    transition: var(--transition-property) var(--transition-duration-micro-medium) var(--transition-timing-function);

    &.checked {
        box-shadow: inset 0 var(--solid-inset-distance) var(--solid-inset-size) var(--solid-inset-color-brand);
        background-color: var(--brand-solid-medium);
        border-color: var(--solid-border-color-brand);

        .toggle {
            left: calc(100% - var(--static-space-20));
            transform-origin: right;
        }
    }
}

.toggle {
    transform-origin: left;
    width: var(--static-space-16);
    height: var(--static-space-16);
    border-radius: var(--radius-l);
    background-color: var(--brand-on-solid-strong);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--static-space-4);
    transition: left 0.3s, transform 0.3s;
    outline: none;
}

.container:hover .toggle::before,
.toggle:focus-within::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--static-space-40);
    height: var(--static-space-40);
    background-color: var(--brand-alpha-medium);
    border-radius: var(--radius-999);
    z-index: -1;
    animation: scaleInCenter 0.2s forwards;
}

@keyframes scaleInCenter {
    from {
        transform: translate(-50%, -50%) scale(0);
    }
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}