@import '../utils.less';

/**
 * @name Appearance
 * @selector [tuiAppearance]
 *
 * @description
 * Base directive to apply different styles to interactive elements
 *
 * @attributes
 * data-appearance — current appearance
 * data-state — manual interactive state override ('active' | 'disabled' | 'hover')
 * data-focus — manual :focus-visible state override
 * data-mode — arbitrary manual mode like 'checked', 'invalid' or 'checked invalid'
 *
 * @example
 * <button tuiAppearance data-appearance='primary'></button>
 *
 * @see-also
 * Button
 */
[tuiAppearance]:where(*&) {
    .transition(all, @tui-duration-fast);

    position: relative;
    appearance: none;
    outline: 0.125rem solid transparent;
    outline-offset: -0.125rem;
    transition-property: color, background-color, opacity, box-shadow, border-color, border-radius;

    &::before,
    &::after {
        transition-property: none;
        transition-duration: inherit;
        transition-timing-function: ease-in-out;
    }

    .appearance-focus({
        outline-color: var(--tui-border-focus);
    });

    .appearance-disabled({
        cursor: initial;
        opacity: var(--tui-disabled-opacity);

        &::before,
        &::after {
            cursor: initial;
        }
    });
}