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

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

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


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

@use '../mixins' as *;


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

    .#{$prefix}-chart {
        align-items: center;
        display: flex;
        max-width: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
        @if map.has-key($mixins, 'hook-chart') {
            @include meta.apply(map.get($mixins, 'hook-chart'));
        }

        .#{$prefix}-chart-placeholder {
            position: absolute;
            width: 100%;
        }

        table, th, td { border-spacing: 0 !important }
    }

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

    @content;
}

@mixin chart-tokens {
    @content;
}