// Name:            Quotation Delta
// Description:     Component to style quotation delta
//
// Component:       `uk-quotation-delta`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin quotation-delta-styles {
    /* ========================================================================
       Component: Quotation Delta
     ========================================================================== */

    .#{$prefix}-quotations-delta {
        color: var(--global-muted-color);
        direction: ltr;
        display: inline-block;
        font-size: var(--global-font-size);
        font-weight: 500;
        line-height: var(--global-line-height);
        position: relative;
        @if map.has-key($mixins, 'hook-quotations-delta') {
            @include meta.apply(map.get($mixins, 'hook-quotations-delta'));
        }
    }

    .#{$prefix}-quotations-delta.#{$prefix}-quotations-delta-up::before,
    .#{$prefix}-quotations-delta.#{$prefix}-quotations-delta-down::before {
        background-color: currentColor;
        content: '';
        display: inline-block;
        height: 0.8em;
        mask-repeat: no-repeat;
        mask-size: 0.8em var(--breadcrumb-divider-font-size);
        padding-right: 0.677em;
        width: 0.8em;
        @if map.has-key($mixins, 'hook-quotations-delta-arrow') {
            @include meta.apply(map.get($mixins, 'hook-quotations-delta-arrow'));
        }
    }

    .#{$prefix}-quotations-delta.#{$prefix}-quotations-delta-up {
        color: var(--global-success-color);
        @if map.has-key($mixins, 'hook-quotations-delta-up') {
            @include meta.apply(map.get($mixins, 'hook-quotations-delta-up'));
        }
    }

    .#{$prefix}-quotations-delta.#{$prefix}-quotations-delta-up::before {
        mask-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 9" height="9" width="18"><path d="M1 10L9 2L17 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>');
        @if map.has-key($mixins, 'hook-quotations-delta-up-arrow') {
            @include meta.apply(map.get($mixins, 'hook-quotations-delta-up-arrow'));
        }
    }

    .#{$prefix}-quotations-delta.#{$prefix}-quotations-delta-down {
        color: var(--global-danger-color);
        @if map.has-key($mixins, 'hook-quotations-delta-down') {
            @include meta.apply(map.get($mixins, 'hook-quotations-delta-down'));
        }
    }

    .#{$prefix}-quotations-delta.#{$prefix}-quotations-delta-down::before {
        mask-image: url('data:image/svg+xml;utf8,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 9" height="9" width="18"><path d="M17 1L9 9L1 1" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>');
        @if map.has-key($mixins, 'hook-quotations-delta-down-arrow') {
            @include meta.apply(map.get($mixins, 'hook-quotations-delta-down-arrow'));
        }
    }

    @content;
}

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