/*!
 * SingleDivUI v1.0.1 | https://singledivui.com | (c) 2023 Soundar | MIT License
 */

.sd-chart {
    --axis-line-color: #5c5c5c;
    --grid-line-color: #ddd;
    --label-color: #4e4e4e;
    --grid-line-size: 1px;
    --axis-line-size: 1px;
    --label-distance: 10px;
    --line-size: 2px;
    --line-color: #6d81f0;
    --point-radius: 6px;
    --point-color: inherit;
    --point-border-color: inherit;
    --point-border-width: inherit;
    --dot-radius: calc(var(--point-radius) / var(--dot-ratio, 1));
    --point-inner-color: transparent;
    --bar-color: #6d81f0;
    --area-color: #6d81f04d;
    --area-top-color: transparent
}

.sd-graph {
    position: relative;
    z-index: 10;
    box-sizing: content-box;
    --_x-axis-line-size: var(--x-axis-line-size, var(--axis-line-size));
    --_y-axis-line-size: var(--y-axis-line-size, var(--axis-line-size));
    border-left: var(--_y-axis-line-size) solid var(--y-axis-line-color, var(--axis-line-color));
    border-bottom: var(--_x-axis-line-size) solid var(--x-axis-line-color, var(--axis-line-color));
    --_x-grid-line-size: var(--x-grid-line-size, var(--grid-line-size));
    --_y-grid-line-size: var(--y-grid-line-size, var(--grid-line-size));
    --_x-grid-line-color: var(--x-grid-line-color, var(--grid-line-color));
    --_y-grid-line-color: var(--y-grid-line-color, var(--grid-line-color));
    background-size: var(--_column-size) var(--_row-size);
    background-image: linear-gradient(to bottom, var(--_x-grid-line-color) var(--_x-grid-line-size), transparent 0), linear-gradient(to right, var(--_y-grid-line-color) var(--_y-grid-line-size), transparent 0);
    background-position-x: calc(var(--_start-position) + (var(--_column-size) - (var(--_y-grid-line-size)/ 2)));
    background-position-y: calc(var(--_row-size) - (var(--_y-grid-line-size)/ 2))
}

.sd-graph::after,
.sd-graph::before {
    display: flex;
    position: absolute;
    white-space: pre;
    box-sizing: content-box
}

.sd-graph::before {
    text-align: right;
    z-index: 2;
    --_y-font-size: var(--y-label-font-size, var(--label-font-size));
    --_y-font-family: var(--y-label-font-family, var(--label-font-family));
    --_y-label-distance: var(--y-label-distance, var(--label-distance));
    --_y-label-left: calc((var(--_y-label-width) + var(--_y-axis-line-size) + var(--_y-label-distance) - var(--_layer-padd-x, 0px)) * -1);
    --_y-label-top: calc(var(--_layer-padd-y, 0px) - var(--_row-size) / 2);
    --_y-label-color: var(--y-label-color, var(--label-color));
    font: var(--_y-font-size) var(--_y-font-family);
    content: var(--_y-label, "") !important;
    line-height: var(--_row-size);
    text-shadow: var(--_y-label-left) var(--_y-label-top) var(--_y-label-color);
    color: transparent
}

.sd-graph::after {
    height: 0;
    z-index: 1;
    --_x-font-size: var(--x-label-font-size, var(--label-font-size));
    --_x-font-family: var(--x-label-font-family, var(--label-font-family));
    --_x-label-distance: var(--x-label-distance, var(--label-distance));
    --_x-label-bottom: calc((var(--_x-label-distance) + var(--_x-axis-line-size)) * -1);
    --_x-label-color: var(--x-label-color, var(--label-color));
    font: var(--_x-font-size) var(--_x-font-family);
    content: var(--_x-label, "") !important;
    bottom: var(--_x-label-bottom);
    color: var(--_x-label-color);
    left: calc(var(--_start-position) - var(--_x-label-start, var(--_column-size)/ 2));
    line-height: var(--_x-label-height, normal);
    writing-mode: var(--_x-label-direction, unset)
}

.sd-area::before,
.sd-bar::before,
.sd-line::before {
    display: flex;
    content: "";
    height: calc(100% + (var(--_layer-padd-y, 0px) * 2));
    width: calc(100% + (var(--_layer-padd-x, 0px) * 2));
    top: calc(var(--_layer-padd-y, 0px) * -1);
    left: calc(var(--_layer-padd-x, 0px) * -1)
}

.sd-area::before,
.sd-line::before {
    background-image: var(--background-image);
    background-position: var(--background-position);
    background-size: var(--background-size);
    background-repeat: no-repeat
}

.sd-area,
.sd-line {
    --_line-top-color: transparent;
    --_line-bottom-color: transparent;
    --_line-start: calc(50% - calc(var(--line-size) / 2));
    --_line-end: calc(50% + calc(var(--line-size) / 2));
    --line: var(--_line-bottom-color) var(--_line-start), var(--line-color) var(--_line-start), var(--line-color) var(--_line-end), var(--_line-top-color) 0%;
    --_point-color: var(--point-color, var(--line-color));
    --_point-border-color: var(--point-border-color, var(--line-color));
    --_point-border-width: var(--point-border-width, var(--line-size));
    --point: radial-gradient(circle,
            var(--_point-color) var(--dot-radius),
            var(--point-inner-color) var(--dot-radius), var(--point-inner-color) calc(var(--point-radius) - var(--_point-border-width)),
            var(--_point-border-color) calc(var(--point-radius) - var(--_point-border-width)), var(--_point-border-color) var(--point-radius),
            transparent 0px)
}

.sd-area {
    --_line-top-color: var(--area-top-color);
    --_line-bottom-color: var(--area-color)
}

.sd-bar::before {
    background-image: var(--background-image);
    background-size: var(--background-size);
    background-position-x: var(--background-position-x);
    background-position-y: 100%;
    background-repeat: no-repeat
}

.sd-bar {
    --bar: linear-gradient(var(--bar-color) 100%, transparent);
    --_x-label-start: var(--_column-size)
}