// Name:            Tokens List
// Description:     Component to style tokens list
//
// Component:       `uk-tokens-list`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin tokens-list-styles {
    /* ========================================================================
       Component: Tokens List
     ========================================================================== */

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

    /*
     * List item
     */
    .#{$prefix}-tokens-list-item {
        box-sizing: border-box;
        column-gap: var(--global-small-gutter);
        cursor: pointer;
        padding: var(--global-small-gutter) 0;
        @if map.has-key($mixins, 'hook-tokens-list-item') {
            @include meta.apply(map.get($mixins, 'hook-tokens-list-item'));
        }
    }

    .#{$prefix}-tokens-list-item.#{$prefix}-disabled {
        cursor: default;
        pointer-events: none;
        user-select: none;
        @if map.has-key($mixins, 'hook-tokens-list-item-disabled') {
            @include meta.apply(map.get($mixins, 'hook-tokens-list-item-disabled'));
        }
    }

    .#{$prefix}-tokens-list-item.#{$prefix}-disabled > * { opacity: 0.32; }

    /* Currency with tip3 token combobox wrapper */
    .#{$prefix}-currency-with-tip3-combobox-items {
        margin-left: 36px;
        @if map.has-key($mixins, 'hook-currency-with-tip3-combobox-items') {
            @include meta.apply(map.get($mixins, 'hook-currency-with-tip3-combobox-items'));
        }
    }

    .#{$prefix}-currency-with-tip3-combobox-items .#{$prefix}-tokens-list-item {
        border-top: var(--global-border-width) var(--global-border-style) var(--global-border);
        @if map.has-key($mixins, 'hook-currency-with-tip3-combobox-items-list-item') {
            @include meta.apply(map.get($mixins, 'hook-currency-with-tip3-combobox-items-list-item'));
        }
    }

    .#{$prefix}-currency-with-tip3-item {
        box-sizing: border-box;
        column-gap: var(--global-small-gutter);
        cursor: pointer;
        padding: var(--global-small-gutter) 0;
        @if map.has-key($mixins, 'hook-currency-with-tip3-item') {
            @include meta.apply(map.get($mixins, 'hook-currency-with-tip3-item'));
        }
    }

    /* Currency with tip3 item */
    .#{$prefix}-currency-with-tip3-item .#{$prefix}-currency-with-tip3-item-icons {
        flex-shrink: 0;
        height: 36px;
        @if map.has-key($mixins, 'hook-currency-with-tip3-item-icons') {
            @include meta.apply(map.get($mixins, 'hook-currency-with-tip3-item-icons'));
        }
    }

    .#{$prefix}-currency-with-tip3-item .#{$prefix}-currency-with-tip3-item-icons .#{$prefix}-token-icon {
        display: block;
        @if map.has-key($mixins, 'hook-currency-with-tip3-item-token-icon') {
            @include meta.apply(map.get($mixins, 'hook-currency-with-tip3-item-token-icon'));
        }
    }

    .#{$prefix}-currency-with-tip3-item .#{$prefix}-currency-with-tip3-item-icons .#{$prefix}-token-icon + .#{$prefix}-token-icon {
        margin-left: 8px;
        margin-top: -8px;
    }

    .#{$prefix}-currency-with-tip3-item.#{$prefix}-disabled {
        cursor: default;
        pointer-events: none;
        user-select: none;
        @if map.has-key($mixins, 'hook-currency-with-tip3-item-disabled') {
            @include meta.apply(map.get($mixins, 'hook-currency-with-tip3-item-disabled'));
        }
    }

    .#{$prefix}-currency-with-tip3-item.#{$prefix}-disabled > * { opacity: 0.32; }

    .#{$prefix}-tokens-list-item-wrapper + .#{$prefix}-tokens-list-item-wrapper {
        border-top: var(--global-border-width) var(--global-border-style) var(--global-border);
        @if map.has-key($mixins, 'hook-tokens-list-item-wrapper') {
            @include meta.apply(map.get($mixins, 'hook-tokens-list-item-wrapper'));
        }
    }

    @content;
}

@mixin tokens-list-tokens {
    @content;
}