.yagr {
    --yagr-font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', arial, sans-serif;

    &_theme_light,
    &_theme_light-hc {
        --yagr-title-color: #333333;

        --yagr-legend-item: rgba(0, 0, 0, 0.5);
        --yagr-legend-item-hover: #000000;
        --yagr-legend-item-hidden: rgba(0, 0, 0, 0.3);

        --yagr-background: #ffffff;
        --yagr-grid: rgba(0, 0, 0, 0.105);
        --yagr-axis-stroke: rgba(0, 0, 0, 0.5);
    }

    &_theme_dark,
    &_theme_dark-hc {
        --yagr-title-color: rgba(255, 255, 255, 0.35);

        --yagr-legend-item: rgba(255, 255, 255, 0.5);
        --yagr-legend-item-hover: #a09fa3;
        --yagr-legend-item-hidden: hsla(0, 0%, 100%, 0.17);

        --yagr-background: #2d2c33;
        --yagr-grid: rgba(255, 255, 255, 0.23);
        --yagr-axis-stroke: rgba(255, 255, 255, 0.5);
    }

    &_theme_dark-hc {
        --yagr-background: rgba(34, 35, 38, 1);
    }
}

.yagr {
    width: 100%;
    height: 100%;
    font-family: var(--yagr-font-family);
    background-color: var(--yagr-background);
    // To have properly resize logic in case of using `chart.size.adaptive` property
    overflow: hidden;

    .uplot {
        width: 100%;
        font-family: var(--yagr-font-family);
    }

    .u-title {
        color: var(--yagr-title-color);
        font-size: 14px;
        font-weight: bold;
        line-height: 14px;
        margin-top: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .u-select {
        background: rgba(51, 92, 173, 0.25);
    }
}

@import 'uplot/dist/uPlot.min';
@import './YagrCore/plugins/tooltip/tooltip.scss';
@import './YagrCore/plugins/cursor/cursor.scss';
@import './YagrCore/plugins/legend/legend.scss';