/*
 * CSS for the XChain explorer chart layer
 */

/* Styles for the XChain chart layer (js/xchain_charts.js). Replaces the
   Highcharts stylesheet this file was swapped in for; Chart.js draws to a
   canvas, so the only CSS it needs covers the surrounding chrome: the
   toolbar, the floating HTML tooltip, and the empty-state message. */

.xc-chart {
    position: relative;
    width: var(--xc-chart-width);
}

.xc-chart-canvas {
    position: relative;
    width: var(--xc-chart-canvas-width);
}

.xc-chart-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--xc-chart-toolbar-gap);
    padding: var(--xc-chart-toolbar-padding-top) var(--xc-space-none) var(--xc-chart-toolbar-padding-bottom);
}

.xc-chart-ranges {
    margin-right: auto;
}

.xc-chart-btn {
    --bs-btn-padding-y: var(--xc-chart-btn-padding-y);
    --bs-btn-padding-x: var(--xc-chart-btn-padding-x);
    --bs-btn-font-size: var(--xc-chart-btn-font-size);
}

.xc-chart-nodata {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--xc-chart-nodata-min-height);
    font-weight: var(--xc-chart-nodata-font-weight);
    font-size: var(--xc-chart-nodata-font-size);
    color: var(--xc-chart-nodata-color);
}

/* Floating tooltip. Appended to <body> so it is never clipped by the
   table-responsive scroll container the market panels live in. */
.xc-chart-tooltip {
    position: absolute;
    z-index: var(--xc-chart-tooltip-z-index);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--xc-chart-tooltip-transition-duration) ease;
    padding: var(--xc-chart-tooltip-padding-y) var(--xc-chart-tooltip-padding-x);
    border: var(--xc-chart-tooltip-border-width) solid var(--xc-chart-tooltip-border-color);
    border-radius: var(--xc-chart-tooltip-radius);
    background: var(--xc-chart-tooltip-bg);
    color: var(--xc-chart-tooltip-color);
    box-shadow: var(--xc-chart-tooltip-shadow);
    font-size: var(--xc-chart-tooltip-font-size);
    white-space: nowrap;
}

.xc-chart-tooltip-table {
    margin: var(--xc-chart-tooltip-table-margin-top) var(--xc-space-none) var(--xc-space-none);
    border-collapse: collapse;
}

.xc-chart-tooltip-table td {
    padding: var(--xc-space-none) var(--xc-chart-tooltip-cell-padding-x);
}

.xc-chart-tooltip-table td.separator {
    padding: var(--xc-space-none) var(--xc-chart-tooltip-separator-padding-x);
}

.xc-chart-tooltip-table td.text-right {
    text-align: right;
}

.xc-chart-tooltip-table tr.border-top-1 td {
    border-top: var(--xc-chart-tooltip-border-width) solid var(--xc-chart-tooltip-border-color);
}