@import '../utils.less';

/**
 * @name Checkbox
 * @selector [tuiCheckbox]
 *
 * @description
 * A stylized input type="checkbox"
 *
 * @attributes
 * data-size — size (default: 'm') ('s' | 'm')
 *
 * @vars
 * --t-icon-start — checkmark icon
 * --t-icon-end — indeterminate state icon
 *
 * @example
 * <input type="checkbox" tuiCheckbox tuiIcons tuiAppearance data-appearance='secondary' />
 *
 * @see-also
 * Switch, Radio, Appearance
 */
[tuiCheckbox]:where(*&) {
    --t-size: 1.5rem;
    --t-radius: var(--tui-radius-s);

    inline-size: var(--t-size);
    block-size: var(--t-size);
    border-radius: var(--t-radius);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;

    &::before {
        position: absolute;
        block-size: 100%;
        inline-size: 100%;
        font-size: 1rem;
        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"></svg>');
        transform: scale(0);
        transition:
            transform var(--tui-duration) ease-in-out,
            mask 0s var(--tui-duration) ease-in-out;
    }

    &::after {
        display: none;
    }

    &:disabled._readonly._readonly {
        opacity: 1;
        pointer-events: none;
    }

    &:checked,
    &:indeterminate {
        &::before {
            mask-image: var(--t-icon-start);
            transform: scale(1);
            transition:
                transform var(--tui-duration) ease-in-out,
                mask 0s ease-in-out;
            transition-duration: inherit;
        }
    }

    &:indeterminate::before {
        mask-image: var(--t-icon-end);
    }

    &[data-size='s'] {
        --t-size: 1rem;
        --t-radius: var(--tui-radius-xs);

        &::before {
            font-size: 0.875rem;
        }
    }

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