@import '../utils.less';

/**
 * @name Switch
 * @selector [tuiSwitch]
 *
 * @description
 * A stylized input type="checkbox" switch
 *
 * @attributes
 * data-size — size (default: 'm') ('s' | 'm')
 *
 * @vars
 * --t-icon-start — checkmark icon
 *
 * @example
 * <input type="checkbox" tuiSwitch tuiAppearance data-appearance="primary" />
 *
 * @see-also
 * Checkbox, Radio
 */
[tuiSwitch]:where(*&) {
    .transition(~'background, box-shadow', @tui-duration-fast);

    display: inline-block;
    inline-size: 3rem;
    block-size: 1.5rem;
    border-radius: 2rem;
    overflow: hidden;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    color: #fff !important;

    &[data-size='s'] {
        block-size: 1rem;
        inline-size: 2rem;

        &::before {
            inline-size: 1rem;
            transform: translateX(calc(var(--tui-inline) * -1rem));
            font-size: 0.75rem;
        }

        &::after {
            inline-size: 1rem;
            box-shadow: calc(var(--tui-inline) * -2.625rem) 0 0 0.5rem var(--tui-background-base);
            outline-width: 0.167rem;
            transform: scale(0.375);
        }

        &:checked::after {
            transform: scale(0.375) translateX(calc(var(--tui-inline) * 2.625rem));
        }
    }

    &:checked {
        &::before {
            transform: none;
        }

        &::after {
            transform: scale(0.33333) translateX(calc(var(--tui-inline) * 4.5rem));
        }
    }

    &:disabled._readonly._readonly {
        opacity: 1;
    }

    &::before,
    &::after {
        position: absolute;
        block-size: 100%;
        inline-size: 1.5rem;
        transition-property: transform;
        zoom: 1;
    }

    &::before {
        inset-inline-start: 0.125rem;
        font-size: 1rem;
        transform: translateX(calc(var(--tui-inline) * -1.5rem));
    }

    &::after {
        display: block;
        inset-inline-end: 0;
        border-radius: 100%;
        background: none;
        transform: scale(0.33333);
        box-shadow: calc(var(--tui-inline) * -4.5rem) 0 0 0.75rem var(--tui-background-base);
        outline: 0.375rem solid var(--tui-background-neutral-2-pressed);
    }

    &:not([data-icon-start])::after {
        outline-offset: 20rem;
    }

    &:invalid:not([data-mode]),
    &[data-mode~='invalid'] {
        color: #fff;
    }
}