// Name:            Token Icon
// Description:     Component to style token icon
//
// Component:       `uk-token-icon`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin token-icon-styles {
    /* ========================================================================
       Component: Token Icon
     ========================================================================== */

    .#{$prefix}-token-icon {
        --token-icon-size: 32px;
        max-width: 100%;
        @if map.has-key($mixins, 'hook-token-icon') {
            @include meta.apply(map.get($mixins, 'hook-token-icon'));
        }
    }

    .#{$prefix}-token-icon:not(svg) {
        height: var(--token-icon-size);
        width: var(--token-icon-size);
    }

    .#{$prefix}-token-icon-xsmall { --token-icon-size: 20px; }
    .#{$prefix}-token-icon-small { --token-icon-size: 24px; }
    .#{$prefix}-token-icon-medium { --token-icon-size: 36px; }
    .#{$prefix}-token-icon-large { --token-icon-size: 40px; }

    @content;
}

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