// Name:            Formatted currency value
// Description:     Component to style formatted currency valu
//
// Component:       `uk-formatted-currency-value`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin formatted-currency-value-styles {
    /* ========================================================================
       Component: Formatted Currency Value
     ========================================================================== */

    .#{$prefix}-formatted-currency-value {
        color: var(--formatted-currency-value-color);
        direction: ltr;
        @if map.has-key($mixins, 'hook-formatted-currency-value') {
            @include meta.apply(map.get($mixins, 'hook-formatted-currency-value'));
        }
    }

    .#{$prefix}-formatted-currency-value .formatted-currency-value-integer {
        color: var(--formatted-currency-value-integer-color);
        @if map.has-key($mixins, 'hook-formatted-currency-value-integer') {
            @include meta.apply(map.get($mixins, 'hook-formatted-currency-value-integer'));
        }
    }

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

    .#{$prefix}-formatted-currency-value .#{$prefix}-formatted-currency-value-fractional {
        color: var(--formatted-currency-value-fractional-color);
        font-size: var(--formatted-currency-value-fractional-font-size);
        @if map.has-key($mixins, 'hook-formatted-currency-value-fractional') {
            @include meta.apply(map.get($mixins, 'hook-formatted-currency-value-fractional'));
        }
    }

    @content;
}

@mixin formatted-currency-value-tokens {
    --formatted-currency-value-color: inherit;
    --formatted-currency-value-integer-color: var(--formatted-currency-value-color);
    --formatted-currency-value-fractional-color: inherit;
    --formatted-currency-value-fractional-font-size: 0.95rem;
    @content;
}