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

.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;
	
	@include tablet-max {
		padding-top: $grid-gutter-width/2;
	}
	
	> div {
		width: 50%;
		padding: 10px $grid-gutter-width/2;
		
		@include tablet-max {
			padding: $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: $widget-text;
		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 transparentize($black, 0.9);
		border-bottom: none;
		margin: $grid-gutter-width/2 0;
		
		@include tablet-max {
			clear: both;
			padding: $grid-gutter-width/3 0;
			border-top: none;
			border-bottom: 1px solid transparentize($black, 0.9);
		}
		
		@include mobile-max {
			padding: 3px 0;
		}
	}
	
	@include mobile-max {
		flex-wrap: wrap;
		
		> div {
			width: 100%;
			padding-top: 0;
			padding-bottom: 5px;
		}
	}
}