// Name:            Pie Chart
// Description:     Component to style pie chart
//
// Component:       `uk-pie-chart`
//
// ========================================================================

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

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


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

@use '../mixins' as *;


@mixin pie-chart-styles {
    /* ========================================================================
       Component: Pie Chart
     ========================================================================== */

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

    .#{$prefix}-pie-chart .#{$prefix}-hover {
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .#{$prefix}-pie-chart .#{$prefix}-active {
        opacity: 0.25;
    }

    .#{$prefix}-pie-chart-tooltip {
        background: var(--global-background);
        border-radius: var(--global-border-radius);
        font-size: var(--global-small-font-size);
        left: 0;
        letter-spacing: 0.6px;
        line-height: normal;
        padding: var(--padding);
        pointer-events: none;
        position: fixed;
        top: 0;
        will-change: transform;
        z-index: 1000;
        @if map.has-key($mixins, 'hook-pie-chart-tooltip') {
            @include meta.apply(map.get($mixins, 'hook-pie-chart-tooltip'));
        }

        @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
            -webkit-backdrop-filter: blur(64px);
            backdrop-filter: blur(64px);
            background: linear-gradient(0deg, rgb(5 11 46 / 12%), rgb(5 11 46 / 12%)), rgb(255 255 255 / 12%);
        }
    }
    @content;
}

@mixin pie-chart-tokens {
    @content;
}