//@import "../../../abstracts/abstracts";

$graph-no-data-available-color: $material-design-disabled-border-color;

.apexcharts-canvas {
	/*-webkit-box-shadow: 0px 3px 5px rgb(0 24 62 / 7%);
    -moz-box-shadow: 0px 3px 5px rgba(0,24,62,0.07);
    box-shadow: 0px 3px 5px rgb(0 24 62 / 7%); <--- Dynabloqs.css */
	border-radius: $border-radius-default;
    background: none;
}

/* Main menu svg */
[data-type="tree"] ul li [data-role="icon"] svg {
	width: $svg-icon-size;//20px;
	height: $svg-icon-size;//20px;
	margin: 0 10px 0 0 !important;
}

/*
    Apex Charts
    - Default toolbar styling
*/
.apexcharts-toolbar {
    position: relative !important;
    float: left !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px 10px 10px !important;
    left: 0 !important;
    right: auto !important;
    top: 0 !important;
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
    z-index: unset !important;

    .apexcharts-zoom-icon,
    .apexcharts-zoomin-icon,
    .apexcharts-zoomout-icon,
    .apexcharts-reset-icon,
    .apexcharts-pan-icon,
    .apexcharts-selection-icon,
    .apexcharts-menu-icon,
    .apexcharts-toolbar-custom-icon,
    .apexcharts-selection-icon {
        display: inline-block;
        -webkit-transform: scale(1);
        transform: scale(1);
        width: 24px;
        height: 24px;
        svg {
            -webkit-transform: scale(1);
            transform: scale(1);
            fill: color(text-color-default);
            color: color(text-color-default);
        }
        &:hover {
            svg {
                fill: $color-primary;
            }
        }
    }

    svg {
        float: left;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        stroke: none !important;
        fill: color(text-color-default);
    }

    // apexcharts-selected is applied to a toolbar button when it is active. This is possible with the zoom and selection tools.
    .apexcharts-selected {
        svg {
            fill: $color-primary !important;
            color: $color-primary !important;
            stroke: none !important;
        }
    }
    .apexcharts-toolbar-custom-icon {
        svg {
            fill: color(text-color-default);
        }
        &:hover {
            svg {
                fill: $color-primary;
            }
        }
    }
}

.dbq-element-graph-container {
	height: 100%;
    position: relative; // This is required to ensure the loading view will remain within the bounds of the graph container.
}

.dbq-graph-full-screen-button {
	fill: #bfcad2;
	padding: 10px;
}
.element-graph {
	margin-bottom: 15px;
	background: color(default-background);
	.dbq-graph-full-screen {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: color(default-background);
		overflow-x: auto;
		z-index: 999;
		padding: 10px;
	}
	.dbq-graph-toolbar {
		margin-bottom: 10px;
		>* {
			margin-right: 10px;
		}
		button {
			outline: 0 !important;
			&:active {
				outline: 0 !important;
			}
			&:focus {
				outline: 0 !important;
			}
		}
	}
    .dbq-element-graph-container {
        height: 100%;
        .graph-container {
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            min-height: 100px !important;
            float: left;
            height: 100%;
            .graph-title {
                text-align: center;
            }
            .graph-chart-container {
                float: left;
                border: 0;
                width: 100%;
            }
            .graph-chart-legend-container {
                position: absolute;
                z-index: 1;
                right: 15px;
                top: 50px;
            }
            table {
                width: calc(100% - 10px) !important;
            }
        }
        a.dbq-export-button {
            margin: 10px !important;
            padding: 3px 5px !important;
            background: transparent;
            border: transparent;
            svg {
                padding: 3px;
                width: 20px;
                fill: color(text-color-default);
            }
            &:hover {
                background: $button-background-color;
                border: $button-border-color;
                svg {
                    padding: 3px;
                    width: 20px;
                    fill: $color-white;
                }
            }
        }
        .apexcharts-canvas {
            float: left;
            width: 100% !important;
            height: 100% !important;
            border-radius: $border-radius-default;
            background: $graph-tile-background !important;
            &:after {
                content: "";
                clear: both;
                display: table;
            }

            .apexcharts-title-text {
                fill: $graph-text;
            }

            svg.apexcharts-svg {
                stroke: none;
                background: none;
                width: 100%;
                padding: 10px;
                border-radius: $border-radius-default;
                height: calc(100% - 30px);
                .apexcharts-xaxis,
                .apexcharts-yaxis {
                    .apexcharts-yaxis-title,
                    .apexcharts-xaxis-title {
                        text {
                            fill: $graph-text; 
                            font-weight: 600;
                        }
                    }
                    .apexcharts-text {
                        tspan {
                            fill: $graph-text;
                            font-weight: 500;
                            font-size: 11px;
                        }
                    }
                }
                .apexcharts-xaxis {
                    .apexcharts-xaxis-title-text {
                        padding-bottom: 10px;
                    }
                    text.apexcharts-datalabel {
                        fill: $graph-text; 
                    }
                }
                .apexcharts-yaxis {
                    padding-left: 30px;
                }   
                .apexcharts-inner {
                    float: left;
                    height: 100%;
                    position: relative;
                    z-index: 1;
                    .apexcharts-pie {
                        height: 100%;
                    }
                    .apexcharts-gridline,
                    .apexcharts-xaxis-tick {
                        stroke: $graph-grid-line !important;
                        stroke-opacity: 0.6;
                    }
                }
            
                foreignObject {
                    float: left;
                    height: auto;
                    min-height: 10px;
                    overflow: initial;
                    position: absolute !important;
                    z-index: 999 !important;
                    top: 0 !important;
                    left: 0 !important;
                    .apexcharts-legend {
                        top: 0 !important;
                        left: 0 !important;
                        max-height: auto !important;
                        max-height: 300px !important; // Set a specific height to prevent the legend from being taller than the graph causing hidden items.
                    }
                }

                .apexcharts-pie-series {
                    path {
                        stroke: color(text-color-inverse);
                        stroke-width: 1px;
                    }
                }
                .apexcharts-datalabels {
                    rect {
                        stroke: color(text-color-inverse) !important;
                        stroke-width: 1px;
                    }
                    text {
                        color: color(text-color-inverse) !important;
                        fill: color(text-color-inverse) !important;
                        font-weight: 600 !important;
                    }
                }

            }
            .apexcharts-tooltip {
                border: 2px solid $graph-border-color !important;
                -webkit-box-shadow: $graph-box-shadow;
                -moz-box-shadow: $graph-box-shadow;
                box-shadow: $graph-box-shadow;
                color: color(text-color-default) !important;
                background: none !important;
                .apexcharts-tooltip-title {
                    background: $graph-trans-background;
                    border-bottom: 2px solid $graph-border-color;
                    color: color(text-color-default);
                    font-weight: 600;
                    font-size: $font-size-base !important;
                    line-height: 14px;
                    padding: 10px;
                    margin-bottom: 0;
                }
            
                .apexcharts-tooltip-text-y-value {
                    font-weight: 600 !important;
                    mix-blend-mode: unset;
                    color: #ffffff;
                    fill: #ffffff;
                }
                .apexcharts-tooltip-text-goals-value {
                    font-weight: 600 !important;
                    mix-blend-mode: unset;
                    color: #ffffff;
                    fill: #ffffff;
                }
                .apexcharts-tooltip-text-z-value {
                    color: #ffffff;
                    fill: #ffffff;
                    mix-blend-mode: multiply;
                    font-weight: 500 !important;
                }
                .apexcharts-tooltip-text-y-label {
                    font-weight: 500 !important;
                    mix-blend-mode: unset;
                    color: #ffffff;
                    fill: #ffffff;
                }
                .apexcharts-tooltip-text-label {
                    color: #737373 !important;
                    mix-blend-mode: multiply;
                    font-weight: 600 !important;
                }
                .apexcharts-tooltip-text-value {
                    color: #696969 !important;
                    mix-blend-mode: multiply;
                    font-weight: 500 !important;
                }
            }
        }
        .graph-chart-container {
            height: 100%;
        }
    }
}
/* 
    Some graphs will contain scrollbars due to having more data to show than would fit in the container.
    In this case the original toolbar from the canvas will be moved to another location and we make it sticky.
    Even though we move the original toolbar, ApexCharts will automatically create a new toolbar in the original 
    position, which caused 2 toolbars to be visible upon scrolling to the bottom. This is why we hide the toolbar
    which is visible inside the canvas container.
*/
.element-graph.has-scrollbar { 
    overflow-y: auto;
    
    .apexcharts-toolbar {
        position: sticky !important;
        bottom: 0 !important;
        background: none;
    }
    .apexcharts-canvas {
        .apexcharts-toolbar {
            display: none;
        } 
    } 
    
    .dbq-graph-full-screen {
        .apexcharts-canvas {
            .apexcharts-toolbar {
                display: block;
            } 
        }
    }
    
    .apexcharts-legend {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        z-index: 1;
    }
}
.modal,
.dbq-popup {
	.element-graph {
		border: 2px solid #e5e7ec !important;
		border-radius: $border-radius-default !important;
	}
}

.dbq-light-chart {
    .apexcharts-datalabels {
        text {
            mix-blend-mode: unset;
        }
    }
}

.dbq-dark-chart {
    .apexcharts-datalabels {
        text {
            mix-blend-mode: multiply;
        }
    }
}

* {
	&::-ms-backdrop {
		mix-blend-mode: unset;
		color: #ffffff !important;
		fill: #ffffff !important;
	}
}

.apexcharts-grid-column,
.apexcharts-grid-row {
	&:nth-child(even) {
		fill: rgba(252, 252, 252, 0.1) !important;
		opacity: 1 !important;
	}
	&:nth-child(odd) {
		fill: rgba(252, 252, 252, 0.2) !important;
		opacity: 1 !important;
	}
}


.apexcharts-xaxistooltip {
	background: #ffffff !important;
	border-color: #ffffff !important;
	-webkit-box-shadow: 0 0 20px rgba(0, 13, 37, 0.15) !important;
	-moz-box-shadow: 0 0 20px rgba(0, 13, 37, 0.15) !important;
	box-shadow: 0 0 20px rgba(0, 13, 37, 0.15) !important;
	color: #001323 !important;
	font-weight: 600 !important;
}
.apexcharts-xaxistooltip-bottom {
	&:before {
		border-bottom-color: #ffffff !important;
	}
	&:after {
		border-bottom-color: #ffffff !important;
	}
}
.apexcharts-tooltip-series-group.apexcharts-active {
	padding-bottom: 0 !important;
}
.apexcharts-tooltip-series-group {
	&:last-child {
		padding-bottom: 0 !important;
	}
}
.apexcharts-series-markers-wrap {
	circle {
		stroke: color(text-color-inverse) !important;
	}
}

.apexcharts-theme-light {
	.apexcharts-selection-icon {
		&:not(.apexcharts-selected) {
			&:hover {
				svg {
					fill: $color-primary !important;
				}
			}
		}
	}
	.apexcharts-zoom-icon {
		&:not(.apexcharts-selected) {
			&:hover {
				svg {
					fill: $color-primary !important;
				}
			}
		}
	}
	.apexcharts-zoomin-icon,
    .apexcharts-zoomout-icon,
    .apexcharts-reset-icon,
    .apexcharts-menu-icon {
		&:hover {
			svg {
				fill: $color-primary !important;
			}
		}
	}
}
.apexcharts-menu {
    @include popup-menu;
	padding: 6px !important;
	margin-top: -150px;
	.apexcharts-menu-item {
		color: color(text-color-default);
		padding: 5px 10px;
		font-size: $font-size-small;
		font-weight: 500;
		line-height: 20px;
		&:hover {
            background: none !important;
			color: $color-primary;
		}
	}
}
.apexcharts-selection-rect {
	fill: rgba(36, 41, 46, 0.5);
}
.ui-chart-piechart-container {
	border: 0 none;
}
table.ui-chart-legend-items-list {
	tr.ui-chart-legend-item {
		td.ui-chart-legend-item-text {
			font-size: $font-size-base !important;
			padding-left: 5px;
		}
		td.ui-chart-legend-item-badge {
			canvas {
				width: 28px !important;
				height: 26px !important;
			}
		}
	}
}
.graph-table-container {
	width: 100%;
	float: left;
	overflow-x: auto;
	margin-bottom: 15px;
}
.graph-table {
	th {
		padding: 5px 10px;
		border: 1px solid #eee;
	}
	td {
		padding: 5px 10px;
		text-align: right;
		border: 1px solid #eee;
	}
	td.graph-table-row-name {
		font-weight: bold;
	}
}
.ui-chart-tooltip {
	border-color: transparent !important;
}
.graph-tooltip {
	text-align: center;
	padding: 5px 10px;
	label.header {
		font-weight: bold;
		color: #bbb;
	}
	label.content {
		font-weight: 600;
		font-style: italic;
		color: #666;
	}
}
.dbq-form {
	.dbq-graph-header {
		h3 {
			margin: 0;
			float: left;
			width: 100%;
			text-align: center;
			font-size: 18px;
			font-weight: 600;
			line-height: 20px;
			padding: 10px;
			padding-top: 20px;
			color: color(text-color-default);
		}
	}
	.dbq-graph-toolbar {
		.btn-primary {
			padding: 5px;
			svg {
				padding: 3px;
			}
		}
	}
	div[data-element-type="Graph"] {
		h3 {
			float: left;
			width: 100%;
			font-size: $font-size-base;
			line-height: 22px;
			font-weight: 500;
			padding: 0;
			text-align: center;
		}
	}
}

.dbq-graph-scale {
	button {
		font-size: $font-size-base;
		line-height: 20px;
		font-weight: 500;
		padding: 5px 10px;
		color: #626d86;
	}
	.btn {
		padding: 5px 10px;
	}
}

.apexcharts-legend {
    @include popup-menu;
    background-color: $legend-background-color !important;
	background: $legend-background !important;
    display: flex;
    inset: unset !important;
	position: relative !important;
    box-sizing: border-box;
    min-width: 50px;
    max-width: 200px;
    height: auto !important;
    max-height: 400px !important;
    overflow: auto;
    padding: 5px 7px !important;
    top: 0 !important;
    left: 0 !important;
    margin: 2px;

	.apexcharts-hidden-zero-series {
		display: none !important;
	}
	.apexcharts-hidden-null-series {
		display: none !important;
	}
    &.apexcharts-align-right {
        .apexcharts-legend-series {
            display: flex !important;
            margin: 2px 0 !important;
        }
    }
    &.apexcharts-align-left {
        .apexcharts-legend-series {
            display: flex !important;
            margin: 2px 0 !important;
        }
    }

    &.position-bottom,
    &.position-top {
        flex-wrap: wrap;
        &.apexcharts-align-left {
            justify-content: flex-start;
        }
        &.apexcharts-align-center {
            justify-content: center;
        }
        &.apexcharts-align-right {
            justify-content: flex-end;
        }
        .apexcharts-legend-series {
            display: flex;
            align-items: center;
        }
    }
    &.position-right,
    &.position-left {
        flex-direction: column;
        bottom: 0;
        justify-content: flex-start;
    }

    .apexcharts-legend-series {
        cursor: pointer;
        line-height: normal;
        width: 100%;
        margin: 0 !important;
        &:first-of-type {
            border-radius: 3px 0 0 3px;
        }
        &:last-of-type {
            border-radius: 0 3px 3px 0;
        }
        &.apexcharts-no-click {
            cursor: auto;
        }
    }

    .apexcharts-legend-marker {
        position: relative;
        display: block;
        cursor: pointer;
        margin-right: 3px;
        border-style: solid;
        top: 0 !important;
        min-width: 12px !important;
        border: 0 !important;
        margin: 4px;
        box-sizing: border-box;
        float: left !important;
        height: 12px !important;
        width: 12px !important;
        border-radius: 3px !important;
        * {
            pointer-events: none;
        }
    }

    .apexcharts-legend-text {
        position: relative;
        font-family: $font-family-default !important;
        color: $graph-text !important;
        font-weight: 500 !important;
        float: left !important;
        font-size: $font-size-small !important;
        line-height: 14px !important;
        margin: 0 4px;
        * {
            pointer-events: none;
        }
    }
}

.apexcharts-inactive-legend {
	opacity: 0.4;
}

.dbq-graph-multiple,
.dbq-graph-single {
	display: flex;
}

.dbq-no-data-chart-title {
	color: color(text-color-default);
    float: left;
	width: 100%;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	line-height: 20px;
	padding: 10px;
}

.dbq-no-data-available-container {
	float: left;
	width: 100%;
	height: 100%;
	padding: 10px;
	min-height: 100px;
	border-radius: $border-radius-default;
    background: none;
    position: relative;
	.dbq-no-data-available-center {
		float: left;
		width: 100%;
		height: 100px;
		position: absolute;
		top: 50%;
		left: 50%;
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		margin-top: 25px;
	}
	.dbq-no-data-available-image {
		float: left;
		width: 100%;
		text-align: center;

        svg {
			width: 150px;
			height: 50px;
			max-width: 100%;
			padding: 0 50px;
			fill: $graph-no-data-available-color;
		}
	}
	.dbq-no-data-available-text {
		float: left;
		width: 100%;
        color: $graph-no-data-available-color;
		min-height: 40px;
		padding: 10px 5px;
		font-size: $font-size-small;
		font-weight: 500;
		line-height: 20px;
		text-align: center;
	}
	.dbq-no-data-available-wrapper {
		float: left;
		width: 100%;
		height: 100%;
		min-height: 200px;
		position: relative;
	}
}

.graph-value-chart-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.graph-name-container {
        color: color(text-color-default);
		font-size: 16px;
		margin-bottom: 5px;
		font-weight: 700;
        text-align: center;
	}
	.graph-value-container {
        color: color(text-color-default);
		font-size: 26px;
	}
}

.graph-value-list-chart-container {
    h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
        margin: $margin-default 0 ($margin-default * 2) 0 !important;
        color: color(text-color-default) !important;
    }
    .graph-value-list-item-container {
        clear: both;
        float: left;
        width: 100%;
        margin-bottom: 5px;
        font-size: $font-size-medium;
        color: color(text-color-default);

        .graph-value-list-item-name {
            font-weight: 600;
            float: left;
            width: 50%;
            text-align: right;
            margin-right: ($margin-default / 2);
        }
        .graph-value-list-item-value {
            margin-left: ($margin-default / 2);
            float: left;
        }
    }
}