// https://m3.material.io/components/switch/specs

.sd-switch {
    border: solid 2px var(--md-sys-color-outline);
    padding: 0.25rem;
    box-sizing: content-box;
    width: 2rem;
    height: 1rem;
    display: inline-block;
    vertical-align: middle;
    border-radius: 1.25rem;
    background: var(--md-sys-color-surface-container-highest);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect
    transition: all 200ms;

    position: relative;
    &-thumb {
        position: absolute;
        left: 0.25rem; // space for the border width
        top: 50%;
        transform: translateY(-50%);
        width: 1rem;
        height: 1rem;
        transition: all 200ms;
        // the thumb itself
        &::after {
            content: '';
            display: inline-block;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            background: var(--md-sys-color-outline);
            position: absolute;
            top: 0;
            left: 0;
            transition: all 200ms;
        }
    }

    &-thumb::before {
        content: '';
        display: inline-block;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: rgb(0 0 0 / 0.1);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 200ms;
        opacity: 0;
    }
    &:hover,
    &:focus-visible {
        outline: none;
        // the border
        .sd-switch-thumb::before {
            opacity: 1;
        }
    }
    &:active {
        .sd-switch-thumb::after {
            transform: scale(150%);
        }
    }

    &[data-sd-checked='true'] {
        background: var(--md-sys-color-primary);
        border-color: var(--md-sys-color-primary);
        .sd-switch-thumb {
            left: 50%;
            &::after {
                background: var(--md-sys-color-on-primary);
            }
        }
    }

    &-icon {
        color: var(--md-sys-color-surface-container-highest);
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        z-index: 2;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        user-select: none;
    }
    &[data-sd-checked='true'] &-icon {
        color: var(--md-sys-color-on-surface);
    }

    &[data-sd-disabled='true'] {
        pointer-events: none;
        filter: grayscale(98%) opacity(40%);
    }
}