// Name:            Token Select
// Description:     Component to style token select
//
// Component:       `uk-token-select`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin token-select-styles {
    /* ========================================================================
       Component: Token Select
     ========================================================================== */

    .#{$prefix}-token-select .#{$prefix}-token-badge .#{$prefix}-token-badge-symbol,
    .#{$prefix}-token-select-dropdown .#{$prefix}-token-badge .#{$prefix}-token-badge-symbol {
        max-width: none;
    }

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

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

    @content;
}

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