// Name:            Stats
// Description:     Component to style stats element
//
// Component:       `uk-stats`
//
// ========================================================================

@use 'sass:map';
@use 'sass:meta';

@use '@broxus/react-uikit/styles/variables' as *;


// Variables
// ========================================================================

@use '../mixins' as *;


@mixin stats-styles {
    /* ========================================================================
       Component: Stats
     ========================================================================== */

    .#{$prefix}-stats {
        @if map.has-key($mixins, 'hook-stats') {
            @include meta.apply(map.get($mixins, 'hook-stats'));
        }
    }

    .#{$prefix}-stats-term {
        color: var(--global-muted-color);
        font-size: var(--global-xsmall-font-size);
        font-weight: 500;
        letter-spacing: 0.6px;
        @if map.has-key($mixins, 'hook-stats-term') {
            @include meta.apply(map.get($mixins, 'hook-stats-term'));
        }
    }

    .#{$prefix}-stats-value {
        font-size: var(--global-font-size);
        line-height: normal;
        @if map.has-key($mixins, 'hook-stats-value') {
            @include meta.apply(map.get($mixins, 'hook-stats-value'));
        }
    }

    .#{$prefix}-stats-extra-value {
        font-size: var(--global-xsmall-font-size);
        line-height: 1.1;
        @if map.has-key($mixins, 'hook-stats-extra-value') {
            @include meta.apply(map.get($mixins, 'hook-stats-extra-value'));
        }
    }

    .#{$prefix}-stats-medium {
        @if map.has-key($mixins, 'hook-stats-medium') {
            @include meta.apply(map.get($mixins, 'hook-stats-medium'));
        }
    }

    .#{$prefix}-stats-medium .#{$prefix}-stats-value {
        font-size: var(--global-medium-font-size);
    }

    .#{$prefix}-stats-large {
        @if map.has-key($mixins, 'hook-stats-large') {
            @include meta.apply(map.get($mixins, 'hook-stats-large'));
        }
    }

    .#{$prefix}-stats-large .#{$prefix}-stats-term {
        font-size: var(--global-font-size);
    }

    .#{$prefix}-stats-large .#{$prefix}-stats-value {
        font-size: var(--global-large-font-size);
    }

    @content;
}

@mixin stats-tokens {
    @content;
}