// Name:            Quotation Rate
// Description:     Component to style quotation rate
//
// Component:       `uk-quotations-rate`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin quotation-rate-styles {
    /* ========================================================================
       Component: Quotation Rate
     ========================================================================== */

    .#{$prefix}-quotations-rate {
        align-items: center;
        column-gap: var(--global-small-gutter);
        display: inline-flex !important;
        flex-direction: row;
        justify-content: center;
        @if map.has-key($mixins, 'hook-quotations-rate') {
            @include meta.apply(map.get($mixins, 'hook-quotations-rate'));
        }
    }

    .#{$prefix}-quotations-rate .#{$prefix}-quotations-rate-icon {
        align-items: center;
        display: flex;
        @if map.has-key($mixins, 'hook-quotations-rate-icon') {
            @include meta.apply(map.get($mixins, 'hook-quotations-rate-icon'));
        }
    }

    .#{$prefix}-quotations-rate .#{$prefix}-quotations-rate-prices {
        display: inline-flex;
        @if map.has-key($mixins, 'hook-quotations-rate-prices') {
            @include meta.apply(map.get($mixins, 'hook-quotations-rate-prices'));
        }
    }

    @content;
}

@mixin quotation-rate-tokens {
    @content;
}