/*-- Datalab Theme --*/
@charset "UTF-8";

$font-family: "Sans Pro",Arial,sans-serif, "nanumgothic", "Dotum";
$line-stroke-widdth: 0.7px;
$text-font-size: 11px;

@use "../canvas-legend" as canvasLegend;

/*-- Default color pattern --*/
.bb-color-pattern {
    background-image: url("#2ac4b3;#feaf29;#ff617b;#73a2ef;#b180d0;#3064cf;#d0a45f;#8aaec7;#ef65a2;#8aaec7;");
}

/*-- Chart --*/
.bb {
    svg {
        font-size: $text-font-size;
        font-family: $font-family;
        line-height: 1;
    }

    path, line {
        fill: none;
        stroke: #000;
    }

    text, .bb-button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-font-smoothing: antialiased;
        user-select: none;
        fill: #555;
        font-size: $text-font-size;
    }
}

.bb-chart-arcs {
	.bb-needle {
		fill: #000;
	}
}

/*-- Funnel --*/
.bb-chart-funnels {
	path {
		stroke-width: 0;
	}

	+ .bb-chart-texts text {
		fill: #fff;
	}
}

/*-- Axis --*/
.bb-axis {
    stroke-width: $line-stroke-widdth;

	.bb-axis-x-tooltip, .bb-axis-y-tooltip, .bb-axis-y2-tooltip {
        font-size: 0.9em;
        fill: #fff;
		white-space: nowrap;
	}
}

.bb-axis-y text, .bb-axis-y2 text {
    fill: #737373;
}

.bb-event-rects {
    fill-opacity: 1 !important;

    .bb-event-rect {
        fill: transparent;
    }

    .bb-event-rect._active_ {
        fill: rgba(39, 201, 3, 0.05);
    }
}

.tick._active_ text {
    fill: #00c83c !important;
}

/*-- Grid --*/
.bb-grid {
    pointer-events: none;

    line {
        stroke: #f1f1f1;
    }
}

.bb-xgrid-focus line, .bb-ygrid-focus line {
    stroke: #ddd;
}

/*-- Text on Chart --*/
.bb-text {
    &.bb-empty {
        fill: #767676;
    }
}

/*-- Line --*/
.bb-line {
    stroke-width: $line-stroke-widdth;
}

/*-- Point --*/
.bb-circle {
    fill: #fff !important;
}

.bb-circle {
  &._expanded_ {
    stroke-width: 2px;
  }
}

.bb-selected-circle {
    fill: white;
    stroke-width: 2px;
}

/*-- Bar --*/
.bb-bar {
	stroke-width: 1px;

	&._expanded_ {
		fill-opacity: 0.75;
	}
}

/*-- Candlestick --*/
.bb-candlestick {
	stroke-width: 1px;

	&._expanded_ {
		fill-opacity: 0.75;
	}
}

/*-- Focus --*/
.bb-target, .bb-circles {
    &.bb-focused {
        opacity: 1;

        path {
            &.bb-line, &.bb-step {
                stroke-width: 2px;
            }
        }
    }

    &.bb-defocused {
        opacity: 0.3 !important;

        .text-overlapping {
            opacity: .05 !important;
        }
    }
}

/*-- Region --*/
.bb-region {
    fill: steelblue;

    rect {
        fill-opacity: 0.1;
    }

    &.selected rect {
        fill: rgb(39, 201, 3);
    }
}

/*-- Zoom region --*/
.bb-zoom-brush {
    fill-opacity: .1;
}

/*-- Brush --*/
.bb-brush {
    .extent {
        fill-opacity: 0.1;
    }
}

/*-- Legend --*/
@include canvasLegend.styles($font-family: $font-family, $font-size: $text-font-size, $color: #555);

.bb-legend-item {
    user-select: none;

    line.bb-legend-item-tile {
        stroke-linecap: round;
        stroke-width: 8px;
        transform: translate(7px, 1px);
        stroke-dasharray: 1 20;
    }
}

.bb-legend-item-hidden {
    opacity: 0.15;
}

.bb-legend-background {
    opacity: 0.75;
    fill: white;
    stroke: lightgray;
    stroke-width: 1;
}

/*-- Title --*/
.bb-title {
    font-size: 14px;
}

/*-- Treemap --*/
.bb-chart-treemaps rect {
    stroke: #000;
    stroke-width: 1px;
}

/*-- Tooltip --*/
.bb-tooltip-container {
    z-index: 10;
    font-family: $font-family;
	user-select: none;
    transform: translateZ(0);
}

.bb-tooltip {
    border-collapse: separate;
    border-spacing:0;
    border-radius: 2px;
    empty-cells:show;
    border: 1px solid #999;
    background-color: #fff;
    text-align: left;
    font-size: 11px;
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;

    th {
        font-size: 13px;
        padding: 2px 8px;
        text-align:left;
        border-bottom: solid 2px #ff2d2d;
        background-color: #0b00b1;
        color: #fffdfd;
    }

    td {
        padding: 4px 6px;

        &:first-child {
            padding-left: 8px;
        }

        &:last-child {
            padding-right:8px;
        }

        > span, > svg {
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 6px;
            border: solid 1px #000;
            border-radius: 3px;
            vertical-align: middle;
        }

        &.value {
            border-left: 1px solid transparent;
            text-align: right;
        }
    }

    .bb-tooltip-title {
        display: inline-block;
        color: #aaa;
        line-height: 20px;
    }

    .bb-tooltip-detail {
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .bb-tooltip-name, .bb-tooltip-value {
            font-size: 11px;
            line-height: 13px;
            padding: 4px 0 3px;
            color: #444;
            text-align: left;
            font-weight: normal;
        }

        .bb-tooltip-value {
            padding-left: 5px;
            font-weight: 800;
            font-size: $text-font-size;
        }
    }
}

/*-- Area --*/
.bb-area {
    stroke-width: 0;
    opacity: 0.2;
}

/*-- Arc --*/
.bb-chart-arcs-title {
    dominant-baseline: middle;
    font-size: 1.3em;
}

text.bb-chart-arcs-gauge-title {
    dominant-baseline: middle;
    font-size: 2.7em;
}

.bb-chart-arcs {
    .bb-chart-arcs-background {
        fill: #e0e0e0;
        stroke: none;
    }

    .bb-chart-arcs-gauge-unit {
        fill: #000;
        font-size: 18px;
    }

    .bb-chart-arcs-gauge-min, .bb-chart-arcs-gauge-max {
        fill: #777;
    }

    .bb-chart-arcs-title {
        font-size: 18px !important;
        fill: #000;
        font-weight: 600;
    }

    path.empty {
        fill: #eaeaea;
        stroke-width: 0;
    }

	/*-- Polar --*/
	.bb-levels {
		circle {
			fill: none;
			stroke: #848282;
			stroke-width: .5px;
		}

		text {
			fill: #848282;
		}
	}
}

.bb-line {
	shape-rendering: crispEdges;
}

.bb-chart-arc {
    .bb-gauge-value {
        fill: #3b6969;        
    }

    path {
        stroke: #000;
        stroke-width: 0.5px;
    }

	rect {
		stroke: #fff;
		stroke-width: 1;
	}

    text {
        fill: #fff;
        font-size: 14px;
    }

	/* Connector line base styles */
	.bb-arc-label-line {
		fill: none;
		stroke-width: 1px;
		pointer-events: none;
	}

    .bb-arc-label-line {
        stroke: #7f7f7f;
    }

    > text.bb-arc-label-line-text {
        fill: #000;
    }
}

/*-- Radar --*/
.bb-chart-radars {
    .bb-levels {
        polygon {
            fill: none;
            stroke: #848282;
            stroke-width: .5px;
        }

        text {
            fill: #848282;
        }
    }

    .bb-axis {
        line {
            stroke: #848282;
            stroke-width: .5px;
        }

        text {
            font-size: 1.15em;
            cursor: default;
        }
    }

    .bb-shapes {
        polygon {
            fill-opacity: .2;
            stroke-width: $line-stroke-widdth;
        }
    }
}

/*-- Button --*/
.bb-button {
    position: absolute;
    top: 10px;
    right: 10px;

    .bb-zoom-reset {
        border: solid 1px #ccc;
        background-color: #fff;
        padding: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
}