@taiga-ui/kit/styles/components/radio.less

Taiga UI Angular main components kit

@import '@taiga-ui/core/styles/taiga-ui-local.less';

/**
 * @name Radio
 * @selector [tuiRadio]
 *
 * @description
 * A stylized input type="radio"
 *
 * @attributes
 * data-size — size (default: 'm') ('s' | 'm')
 *
 * @example
 * <input type="radio" tuiRadio />
 *
 * @see-also
 * Checkbox, Switch, Appearance
 */
[tuiRadio] {
    --t-size: 1.5rem;

    .transition(~'background, box-shadow');

    inline-size: var(--t-size);
    block-size: var(--t-size);
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    border-radius: 100%;
    color: var(--tui-text-primary-on-accent-1);

    &:disabled._readonly {
        opacity: 1;
    }

    &::before {
        .fullsize();
        .transition(transform);

        content: '';
        border-radius: 100%;
        background: currentColor;
        transform: scale(0);
    }

    &:checked::before {
        transform: scale(0.5);
    }

    &[data-size='s'] {
        --t-size: 1rem;
    }
}