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

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

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


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

@use '../mixins' as *;


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

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

    .#{$prefix}-amount-input .#{$prefix}-input {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        @if map.has-key($mixins, 'hook-amount-input') {
            @include meta.apply(map.get($mixins, 'hook-amount-input'));
        }
    }

    .#{$prefix}-amount-input .#{$prefix}-button-maximize {
        font-size: var(--button-small-font-size);
        height: calc(var(--form-height) - var(--form-padding-vertical) * 2.5);
        line-height: calc(var(--form-height) - var(--form-padding-vertical) * 2.5);
        padding: 0 var(--button-small-padding-horizontal);
        @if map.has-key($mixins, 'hook-amount-button-maximize') {
            @include meta.apply(map.get($mixins, 'hook-amount-button-maximize'));
        }
    }

    .#{$prefix}-amount-input .#{$prefix}-button-maximize.#{$prefix}-button-small {
        font-size: var(--button-xsmall-font-size);
        height: calc(var(--form-small-height) - var(--form-small-padding-vertical) * 2);
        line-height: calc(var(--form-small-height) - var(--form-small-padding-vertical) * 2);
        @if map.has-key($mixins, 'hook-amount-button-small-maximize') {
            @include meta.apply(map.get($mixins, 'hook-amount-button-small-maximize'));
        }
    }

    .#{$prefix}-amount-input .#{$prefix}-button-maximize.#{$prefix}-button-medium {
        font-size: var(--button-font-size);
        height: calc(var(--form-medium-height) - var(--form-medium-padding-vertical) * 1.333);
        line-height: calc(var(--form-medium-height) - var(--form-medium-padding-vertical) * 1.333);
        @if map.has-key($mixins, 'hook-amount-button-medium-maximize') {
            @include meta.apply(map.get($mixins, 'hook-amount-button-medium-maximize'));
        }
    }

    .#{$prefix}-amount-input .#{$prefix}-button-maximize.#{$prefix}-button-large {
        font-size: var(--button-large-font-size);
        height: calc(var(--form-large-height) - var(--form-large-padding-vertical) * 3);
        line-height: calc(var(--form-large-height) - var(--form-large-padding-vertical) * 3);
        padding: 0 var(--button-padding-horizontal);
        @if map.has-key($mixins, 'hook-amount-button-large-maximize') {
            @include meta.apply(map.get($mixins, 'hook-amount-button-large-maximize'));
        }
    }

    .#{$prefix}-amount-input .#{$prefix}-control-suffix,
    .#{$prefix}-amount-input .#{$prefix}-control-prefix {
        column-gap: var(--global-xsmall-gutter);
    }

    body:not([dir]) .#{$prefix}-amount-input:not(.#{$prefix}-control-rtl).#{$prefix}-button-maximize-shown,
    [dir='ltr'] .#{$prefix}-amount-input:not(.#{$prefix}-control-rtl).#{$prefix}-button-maximize-shown {
        padding-right: var(--form-padding-vertical);
    }

    body:not([dir]) .#{$prefix}-amount-input:not(.#{$prefix}-control-rtl).#{$prefix}-button-maximize-shown.#{$prefix}-control-small,
    [dir='ltr'] .#{$prefix}-amount-input:not(.#{$prefix}-control-rtl).#{$prefix}-button-maximize-shown.#{$prefix}-control-small {
        padding-right: var(--form-small-padding-vertical);
    }

    body:not([dir]) .#{$prefix}-amount-input:not(.#{$prefix}-control-rtl).#{$prefix}-button-maximize-shown.#{$prefix}-control-medium,
    [dir='ltr'] .#{$prefix}-amount-input:not(.#{$prefix}-control-rtl).#{$prefix}-button-maximize-shown.#{$prefix}-control-medium {
        padding-right: calc(var(--form-medium-padding-vertical) * 0.5);
    }

    body:not([dir]) .#{$prefix}-amount-input:not(.#{$prefix}-control-rtl).#{$prefix}-button-maximize-shown.#{$prefix}-control-large,
    [dir='ltr'] .#{$prefix}-amount-input:not(.#{$prefix}-control-rtl).#{$prefix}-button-maximize-shown.#{$prefix}-control-large {
        padding-right: calc(var(--form-large-padding-vertical) * 1.25);
    }

    [dir='rtl'] .#{$prefix}-amount-input.#{$prefix}-button-maximize-shown,
    .#{$prefix}-amount-input.#{$prefix}-control-rtl.#{$prefix}-button-maximize-shown {
        padding-left: var(--form-padding-vertical);
    }

    [dir='rtl'] .#{$prefix}-amount-input.#{$prefix}-button-maximize-shown.#{$prefix}-control-small,
    .#{$prefix}-amount-input.#{$prefix}-control-rtl.#{$prefix}-button-maximize-shown.#{$prefix}-control-small {
        padding-left: var(--form-small-padding-vertical);
    }

    [dir='rtl'] .#{$prefix}-amount-input.#{$prefix}-button-maximize-shown.#{$prefix}-control-medium,
    .#{$prefix}-amount-input.#{$prefix}-control-rtl.#{$prefix}-button-maximize-shown.#{$prefix}-control-medium {
        padding-left: calc(var(--form-medium-padding-vertical) * 0.5);
    }

    [dir='rtl'] .#{$prefix}-amount-input.#{$prefix}-button-maximize-shown.#{$prefix}-control-large,
    .#{$prefix}-amount-input.#{$prefix}-control-rtl.#{$prefix}-button-maximize-shown.#{$prefix}-control-large {
        padding-left: calc(var(--form-large-padding-vertical) * 1.25);
    }

    @content;
}

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