// Name:            Wallet Account
// Description:     Component to style wallet account
//
// Component:       `uk-wallet-account`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin wallet-account-styles {
    /* ========================================================================
       Component: Wallet Account
     ========================================================================== */

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

    .#{$prefix}-wallet-account .#{$prefix}-wallet-account-icon {
        position: relative;
        width: max-content;
        @if map.has-key($mixins, 'hook-wallet-account-icon') {
            @include meta.apply(map.get($mixins, 'hook-wallet-account-icon'));
        }
    }

    .#{$prefix}-wallet-account .#{$prefix}-wallet-account-title {
        color: var(--global-color);
        @if map.has-key($mixins, 'hook-wallet-account-title') {
            @include meta.apply(map.get($mixins, 'hook-wallet-account-title'));
        }
    }

    .#{$prefix}-wallet-account .#{$prefix}-wallet-account-subtitle {
        color: var(--global-muted-color);
        font-size: var(--global-xsmall-font-size);
        letter-spacing: 0.6px;
        line-height: 16px;
        white-space: nowrap;
        @if map.has-key($mixins, 'hook-wallet-account-subtitle') {
            @include meta.apply(map.get($mixins, 'hook-wallet-account-subtitle'));
        }
    }

    .#{$prefix}-wallet-account .#{$prefix}-wallet-account-sub-icon {
        border-radius: 50%;
        bottom: -2px;
        display: flex;
        position: absolute;
        right: -2px;
        @if map.has-key($mixins, 'hook-wallet-account-sub-icon') {
            @include meta.apply(map.get($mixins, 'hook-wallet-account-sub-icon'));
        }
    }

    @content;
}

@mixin wallet-account-tokens {
    @content;
}