// Name:            Formatted Token Amount
// Description:     Component to style formatted token amount
//
// Component:       `uk-formatted-token-amount`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin formatted-token-amount-styles {
    /* ========================================================================
       Component: Formatted Token Amount
     ========================================================================== */

    .#{$prefix}-formatted-token-amount {
        color: var(--formatted-token-amount-color);
        column-gap: var(--global-xsmall-gutter);
        white-space: nowrap;
        @if map.has-key($mixins, 'hook-formatted-token-amount') {
            @include meta.apply(map.get($mixins, 'hook-formatted-token-amount'));
        }
    }

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

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

    .#{$prefix}-formatted-token-amount .#{$prefix}-formatted-token-symbol {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        @if map.has-key($mixins, 'hook-formatted-token-amount-symbol') {
            @include meta.apply(map.get($mixins, 'hook-formatted-token-amount-symbol'));
        }
    }

    @content;
}

@mixin formatted-token-amount-tokens {
    --formatted-token-amount-color: var(--global-color);
    --formatted-token-amount-integer-color: var(--formatted-token-amount-color);
    --formatted-token-amount-fractional-color: var(--global-muted-color);
    --formatted-token-amount-fractional-font-size: 0.95rem;
    @content;
}