$status-error-fore-color: red;
$hint-back-color: white;
$hint-fore-color: #212529; // $gray-900
$hint-border-color: #888;
$hint-shadow-color: #aaa;
$hint-opacity: 0.9;
$square-border-color: black;
$chart-font-family: Arial, Helvetica, sans-serif;

.chart {
    position: relative;
}

.chart-title {
    overflow: hidden;
}

.chart-menu-holder {
    position: absolute;
}

.chart-title-text {
    display: inline-block;
    font-size: 100%;
}

.chart-status {
    display: inline-block;
    float: right;
    font-size: 66%;
    opacity: 0.8;

    &.error {
        color: $status-error-fore-color;
    }
}

.chart-canvas {
    display: block;
}

.chart-time-marker {
    opacity: 0.25;
    position: absolute;
    width: 1px;
    z-index: 1;

    &.hidden {
        display: none;
    }
}

.chart-trend-hint {
    background-color: $hint-back-color;
    border: 1px solid $hint-border-color;
    border-radius: 5px;
    box-shadow: 2px 2px 5px $hint-shadow-color;
    color: $hint-fore-color;
    font-family: $chart-font-family;
    font-size: 12px;
    opacity: $hint-opacity;
    padding: 5px 10px;
    position: absolute;
    z-index: 2;

    &.hidden {
        display: none;
    }

    table {
        border-collapse: collapse;
    }

    td {
        padding: 2px 5px 0 0;
        white-space: nowrap;

        &:last-child {
            padding-right: 0;
        }

        &.color span {
            border: 1px solid $square-border-color;
            display: block;
            height: 12px;
            width: 12px;
        }
    }
}
