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

/// @access private
/// @see {mixin} tokens
/// @param {Map} $theme - The theme used to style the component.
@mixin label($theme) {
    @include tokens($theme, $mode: 'scoped', $scope: '[igxLabel]');

    @include layer(base) {
        $variant: map.get($theme, '_meta', 'theme');

        %label-base {
            @include ellipsis();

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

            [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;
        }
    }
}