// Name:            Ordering Switcher
// Description:     Component to style ordering switcher
//
// Component:       `uk-ordering-switcher`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin ordering-switcher-styles {
    /* ========================================================================
       Component: Ordering Switcher
     ========================================================================== */

    .#{$prefix}-ordering-switcher.#{$prefix}-button {
        align-items: center;
        display: inline-flex;
        font-weight: 400;
        gap: 6px;
        @if map.has-key($mixins, 'hook-ordering-switcher') {
            @include meta.apply(map.get($mixins, 'hook-ordering-switcher'));
        }
    }

    .#{$prefix}-ordering-switcher-rtl {
        flex-direction: row-reverse;
        @if map.has-key($mixins, 'hook-ordering-switcher-rtl') {
            @include meta.apply(map.get($mixins, 'hook-ordering-switcher-rtl'));
        }
    }

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

    .#{$prefix}-ordering-switcher-inactive {
        opacity: 0.7;
        @if map.has-key($mixins, 'hook-ordering-switcher-inactive') {
            @include meta.apply(map.get($mixins, 'hook-ordering-switcher-inactive'));
        }
    }

    @content;
}

@mixin ordering-switcher-tokens {
    @content;
}