@import '../utils.less';

/**
 * @name Label
 * @selector [tuiLabel]
 *
 * @description
 * Easy to use label ready for horizontal orientation for checkbox/radio/switch
 * and vertical for input, select and textarea
 *
 * @example
 * <label tuiLabel><input type="checkbox" /> Click me</tui-icon>
 *
 * @see-also
 * Checkbox, Radio, Title
 */
[tuiLabel]:where(*&) {
    display: flex;
    gap: 0.25rem;
    flex-direction: column;
    font: var(--tui-typography-body-s);
    color: var(--tui-text-primary);

    &:not([data-orientation='vertical']) {
        flex-direction: row;
        inline-size: fit-content;
        font: var(--tui-typography-body-m);
    }

    input[type='checkbox'],
    input[type='radio'] {
        font: inherit;
        inset-block-start: calc(var(--tui-lh) / 2);
        transform: translateY(-50%);
        margin-inline-end: 0.5rem;

        &[data-size='s'] {
            line-height: 1.3;
            margin-inline-end: 0.25rem;
        }
    }

    small {
        font: var(--tui-typography-body-s);
    }

    [tuiTitle]:where(:not([tuiCell] *)) {
        margin-block-start: 0.125rem;
    }

    [tuiSubtitle] {
        color: var(--tui-text-secondary);
    }
}