// Name:            Icons Set
// Description:     Component to style icons set
//
// Component:       `uk-icons-set`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin icons-set-styles {
    /* ========================================================================
       Component: Icons Set
     ========================================================================== */

    .#{$prefix}-icons-set {
        align-items: center;
        display: inline-flex;
        flex-direction: row;
        width: max-content;
        @if map.has-key($mixins, 'hook-icons-set') {
            @include meta.apply(map.get($mixins, 'hook-icons-set'));
        }
    }

    .#{$prefix}-icons-set > .#{$prefix}-icons-set-item {
        display: flex;
        flex: 1;
        @if map.has-key($mixins, 'hook-icons-set-item') {
            @include meta.apply(map.get($mixins, 'hook-icons-set-item'));
        }
    }

    .#{$prefix}-icons-set .#{$prefix}-icons-set-more {
        align-items: center;
        background-color: var(--global-muted-background);
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        flex: 1;
        justify-content: center;
        min-height: 20px;
        min-width: 20px;
        @if map.has-key($mixins, 'hook-icons-set-more') {
            @include meta.apply(map.get($mixins, 'hook-icons-set-more'));
        }
    }

    .#{$prefix}-icons-set.#{$prefix}-icons-set-stack {
        align-items: flex-start;
        flex-direction: column;
        row-gap: var(--global-xsmall-gutter);
        @if map.has-key($mixins, 'hook-icons-set-stack') {
            @include meta.apply(map.get($mixins, 'hook-icons-set-stack'));
        }
    }

    .#{$prefix}-icons-set-overlay {
        max-height: 200px;
        overflow: hidden auto;
        -webkit-overflow-scrolling: touch;
        transform: translate3d(0, 0, 0);
        @if map.has-key($mixins, 'hook-icons-set-overlay') {
            @include meta.apply(map.get($mixins, 'hook-icons-set-overlay'));
        }
    }

    body:not([dir]) .#{$prefix}-icons-set:not(.#{$prefix}-icons-set-rtl, .#{$prefix}-icons-set-stack) > .#{$prefix}-icons-set-item:nth-child(n+2),
    [dir='ltr'] .#{$prefix}-icons-set:not(.#{$prefix}-icons-set-rtl, .#{$prefix}-icons-set-stack) > .#{$prefix}-icons-set-item:nth-child(n+2),
    body:not([dir]) .#{$prefix}-icons-set:not(.#{$prefix}-icons-set-rtl, .#{$prefix}-icons-set-stack) .#{$prefix}-icons-set-more,
    [dir='ltr'] .#{$prefix}-icons-set:not(.#{$prefix}-icons-set-rtl, .#{$prefix}-icons-set-stack) .#{$prefix}-icons-set-more {
        margin-left: -0.667rem;
    }

    [dir='rtl'] .#{$prefix}-icons-set:not(.#{$prefix}-icons-set-stack) > .#{$prefix}-icons-set-item:nth-child(n+2),
    .#{$prefix}-icons-set.#{$prefix}-icons-set-rtl:not(.#{$prefix}-icons-set-stack) > .#{$prefix}-icons-set-item:nth-child(n+2),
    [dir='rtl'] .#{$prefix}-icons-set:not(.#{$prefix}-icons-set-stack) .#{$prefix}-icons-set-more,
    .#{$prefix}-icons-set.#{$prefix}-icons-set-rtl:not(.#{$prefix}-icons-set-stack) .#{$prefix}-icons-set-more {
        margin-right: -0.667rem;
    }

    @content;
}

@mixin icons-set-tokens {
    @content;
}