// Name:            Token Badge
// Description:     Component to style token badge
//
// Component:       `uk-token-badge`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin token-badge-styles {
    /* ========================================================================
       Component: Token Badge
     ========================================================================== */

    .#{$prefix}-token-badge {
        font-size: var(--global-font-size);
        gap: var(--global-small-gutter);
        line-height: normal;
        min-height: var(--global-control-small-height);
        min-width: fit-content;
        @if map.has-key($mixins, 'hook-token-badge') {
            @include meta.apply(map.get($mixins, 'hook-token-badge'));
        }
    }

    .#{$prefix}-token-badge:not(.with-token-name) .#{$prefix}-token-badge-symbol {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        @if map.has-key($mixins, 'hook-token-badge-symbol') {
            @include meta.apply(map.get($mixins, 'hook-token-badge-symbol'));
        }
    }

    .#{$prefix}-token-badge .#{$prefix}-token-badge-name {
        color: var(--global-muted-color);
        font-size: var(--global-small-font-size);
        line-height: normal;
        @if map.has-key($mixins, 'hook-token-badge-name') {
            @include meta.apply(map.get($mixins, 'hook-token-badge-name'));
        }
    }

    .#{$prefix}-token-badge .#{$prefix}-token-badge-address {
        color: var(--global-muted-color);
        font-size: var(--global-small-font-size);
        line-height: normal;
        @if map.has-key($mixins, 'hook-token-badge-address') {
            @include meta.apply(map.get($mixins, 'hook-token-badge-address'));
        }
    }

    @content;
}

@mixin token-badge-tokens {
    @content;
}