// Name:            Token Amount Input
// Description:     Component to style token amount input
//
// Component:       `uk-token-amount-input`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin token-amount-input-styles {
    /* ========================================================================
       Component: Token Amount Input
     ========================================================================== */

    body:not([dir]) .#{$prefix}-token-amount-input.#{$prefix}-amount-input:not(.#{$prefix}-control-rtl),
    [dir='ltr'] .#{$prefix}-token-amount-input.#{$prefix}-amount-input:not(.#{$prefix}-control-rtl) {
        @if map.has-key($mixins, 'hook-token-amount-input') {
            @include meta.apply(map.get($mixins, 'hook-token-amount-input'));
        }
    }

    [dir='rtl'] .#{$prefix}-token-amount-input.#{$prefix}-amount-input.#{$prefix}-control-rtl,
    .#{$prefix}-token-amount-input.#{$prefix}-amount-input.#{$prefix}-control-rtl {
        @if map.has-key($mixins, 'hook-token-amount-input-rtl') {
            @include meta.apply(map.get($mixins, 'hook-token-amount-input-rtl'));
        }
    }

    @content;
}

@mixin token-amount-input-tokens {
    @content;
}