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

$font-family: Helvetica, 'Apple SD Gothic Neo', Arial, sans-serif, "nanumgothic", "Dotum";
$axis-color: #8c8c8c;

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

@mixin select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*-- Default color pattern --*/
.bb-color-pattern {
    background-image: url("#65CFC2;#D0A45F;#64A4F5;#EF65A2;#A377FE;#8AAEC7;#FF7E5A;#898EFE;#FFAC35;#70B0FF;");
}

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

    path, line {
        fill: none; stroke: $axis-color;
    }

    text, .bb-button {
        @include select-none;
        fill: #555;
        font-size: 12px;
        letter-spacing: -.3px;
    }
}

.bb-legend-item-title,
.bb-xgrid-focus,
.bb-ygrid-focus,
.bb-ygrid {
	shape-rendering: crispEdges;
}

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

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

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

/*-- Axis --*/
.bb-axis {
    shape-rendering: crispEdges;

	.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: $axis-color;
}

.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: #ffb6b6;
    stroke-dasharray: 3px;
}

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

/*-- Line --*/
.bb-line {
    stroke-width: 1px;
}

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

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

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

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

	&._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;
    }
}

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

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

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

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

.bb-legend-item line {
    stroke-dasharray: 1px;
}

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

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

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

.bb-tooltip {
    @include select-none;
    border-collapse: separate;
    border-spacing:0;
    empty-cells:show;
    border: 1px solid #999;
    border-radius: 2px;
    background-color: #fff;
    text-align: left;
    font-size: 12px;
    box-shadow: .5px .5px 1px #999;
    white-space: nowrap;

    th {
        font-size: 12px;
        padding: 4px 8px;
        text-align: center;
        border-bottom: dotted 1px #000;
        background-color: #efefef;
        color: #000;
    }

    tr {
        &:last-child td {
            border-bottom: none;
        }
    }

    td {
        padding: 3px 6px;
        background-color:#fff;
        border-bottom: solid 1px #eee;

        &:first-child {
            padding-left: 5px;
            border-right: solid 1px #eee;
        }

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

        > span, > svg {
            display: inline-block;
            width: 5px;
            height: 12px;
            margin-right: 6px;
            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: 1px;
            font-size: 12px;
        }

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

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

/*-- 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: #fff;
    }

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

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

    .bb-chart-arcs-title {
        font-size: 16px !important;
        fill: $axis-color;
        font-style: italic;
    }

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

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

		text {
			fill: #848282;
		}
	}
}

.bb-chart-arc {
    .bb-gauge-value {
        fill: $axis-color;
        font-style: italic;
    }

    path {
        stroke: #fff;
    }

    rect {
        stroke: white;
        stroke-width: 1;
    }

    text {
        fill: #fff;
        font-size: 13px;
        font-weight: bold;
    }

	/* 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: $axis-color;
            stroke-width: .5px;
        }

        text {
            fill: $axis-color;
        }
    }

    .bb-axis {
        line {
            stroke: $axis-color;
            stroke-width: .5px;
        }

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

    .bb-shapes {
        polygon {
            fill-opacity: .2;
            stroke-width: 1px;
        }
    }
}

/*-- 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;
        opacity: .8;
        box-shadow: 1px 1px 2px #ccc;
    }
}