@use "../../common/breakpoints" as *;
@use "../../common/variables" as *;

//
// "Stock Control" widget
//-----------------------

@use "sass:math";

.atum-widget.atum_stock_control_widget {
	.widget-body {
		@include tablet-max {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
}

.stock-control-widget {
	display: flex;
	padding-top: 5px;
	
	.stock-data.hc_mode {
		
		
		h3 {
			color: var(--dash-card-text);
			margin: 3px 0 3px 0;
			
			&:before {
				width: 29px;
				height: 29px;
				border-radius: 5px;
				content: ' ';
				display: inline-block;
				margin-right: 10px;
			}
			&.widget-success:before {
				background-color: var(--green);
			}
			&.widget-warning:before {
				background-color: var(--orange);
			}
			&.widget-danger:before {
				background-color: var(--danger);
			}
			&.widget-primary:before {
				background-color: var(--blue);
			}
		}
		
		h5 {
			margin: 0;
		}
	}
	
	@include tablet-max {
		padding-top:  math.div($grid-gutter-width, 2);
	}
	
	> div {
		width: 50%;
		padding: 10px  math.div($grid-gutter-width, 2);
		
		@include tablet-max {
			padding:  math.div($grid-gutter-width, 2);
		}
	}
	
	.stock-chart {
		
		.stock-chart-tooltip {
			opacity: 1;
			position: absolute;
			background: rgba($black, .7);
			color: $white;
			border-radius: 3px;
			transition: all .1s ease;
			pointer-events: none;
			transform: translate(-50%, 0);
			
			table {
				td {
					white-space: nowrap;
				}
			}
			
		}
		
		.stock-chart-tooltip-key {
			display: inline-block;
			width: 10px;
			height: 10px;
			margin-right: 10px;
		}
		
	}
	
	h3, h5 {
		margin: 10px 0;
		text-align: left;
	}
	
	h3 {
		font-size: 35px;
		font-weight: bold;
		
		@include tablet-max {
			float: right;
		}
		
		@include mobile-max {
			font-size: 24px;
			line-height: 0;
		}
	}
	
	h5 {
		font-size: 15px;
		color: var(--atum-text-color-var1);
		font-weight: 100;
		text-transform: uppercase;
		
		@include tablet-max {
			float: left;
		}
		
		@include mobile-max {
			font-size: 12px;
			line-height: 1;
		}
	}
	
	hr {
		border-top: 1px solid var(--gray-400);
		border-bottom: none;
		margin:  math.div($grid-gutter-width, 2) 0;
		
		@include tablet-max {
			clear: both;
			padding:  math.div($grid-gutter-width, 3) 0;
			border-top: none;
			border-bottom: 1px solid var(--gray-400);
		}
		
		@include mobile-max {
			padding: 3px 0;
		}
	}
	
	@include mobile-max {
		flex-wrap: wrap;
		
		> div {
			width: 100%;
			padding-top: 0;
			padding-bottom: 5px;
		}
	}
}