// Name:            Explorer links
// Description:     Component to style explorer link
//
// Component:       `uk-explorer-link`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin explorer-links-styles {
    /* ========================================================================
       Component: Explorer links
     ========================================================================== */

    .#{$prefix}-explorer-link {
        align-items: center;
        column-gap: 8px;
        display: inline-flex;
        line-height: normal;
        @if map.has-key($mixins, 'hook-explorer-link') {
            @include meta.apply(map.get($mixins, 'hook-explorer-link'));
        }
    }

    .#{$prefix}-explorer-link:hover,
    .#{$prefix}-explorer-link a:hover {
        text-decoration: none;
        @if map.has-key($mixins, 'hook-explorer-link-hover') {
            @include meta.apply(map.get($mixins, 'hook-explorer-link-hover'));
        }
    }

    .#{$prefix}-explorer-link:active,
    .#{$prefix}-explorer-link a:active {
        @if map.has-key($mixins, 'hook-explorer-link-active') {
            @include meta.apply(map.get($mixins, 'hook-explorer-link-active'));
        }
    }

    .#{$prefix}-explorer-link .#{$prefix}-copy-wrapper,
    .#{$prefix}-explorer-link .#{$prefix}-wallet-asset {
        cursor: pointer;
    }

    .#{$prefix}-explorer-link .#{$prefix}-icon-external,
    .#{$prefix}-explorer-link .#{$prefix}-copy-wrapper,
    .#{$prefix}-explorer-link .#{$prefix}-wallet-asset {
        line-height: 0;

        svg {
            height: var(--explorer-link-icon-size);
            width: var(--explorer-link-icon-size);
        }
    }

    @content;
}

@mixin explorer-links-tokens {
    --explorer-link-icon-size: var(--global-font-size);
    @content;
}