/**
 * Weather Bar Styles
 *
 * @package Sierra\WeatherServices
 */

/* Temperature display with arrow icons via pseudo-elements using mask-image for color inheritance */
.temp-high::before,
.temp-low::before {
	content: '';
	display: inline-block;
	width: 12px;
	height: 12px;
	vertical-align: middle;
	background-color: currentColor;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
}

.temp-high::before {
	margin: 0 4px 0 8px;
	mask-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 3L8 13M8 3L4 7M8 3L12 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 3L8 13M8 3L4 7M8 3L12 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.temp-low::before {
	margin: 0 4px;
	mask-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13L8 3M8 13L12 9M8 13L4 9" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 13L8 3M8 13L12 9M8 13L4 9" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* Ensure inline display for proper spacing */
.temp-high,
.temp-low {
	display: inline-block;
}