@use 'sass:map';
@use 'sass:meta';
@use '../../base' as *;

/// @deprecated Use the `css-vars` mixin instead.
/// @see {mixin} css-vars
/// @param {Map} $theme - The theme used to style the component.
@mixin label($theme) {
    // The --variant CSS produced by css-vars is needed also
    // when dynamically switching between the input `type` attribute.
    @include css-vars($theme, '[igxLabel]');

    $variant: map.get($theme, '_meta', 'theme');

    %label-base {
        @include ellipsis();

        position: relative;
        color: var-get($theme, 'color');
        max-width: 100%;
        line-height: normal;

        [dir='rtl'] & {
            transform-origin: top right;
        }

        @if $variant != 'material' {
            height: auto;
        }
    }
}

/// Adds typography styles for the igx-label component.
/// Uses the 'caption'
/// category from the typographic scale.
/// @group typography
/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.
@mixin label-typography(
    $categories: (
        label: 'subtitle-1',
    )
) {
    $label: map.get($categories, 'label');

    %label-base {
        @include type-style($label) {
            margin: 0;
        }
    }
}