.container {
    cursor: var(--cursor-interactive);
    isolation: isolate;

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

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

        .switch.checked .element::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-micro-medium);

    &.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);

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

.element {
    z-index: 1;
    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;
}

.disabled {
    .switch {
        opacity: 0.4;
    }

    .element::before {
        display: none !important;
    }
}

.container:hover .element::before,
.element: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-full);
    z-index: -1;
    animation: scaleInCenter 0.2s forwards;
}

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