<%@ required ('Uize.Widgets.CssUtil'); %>
<%
	var _cssUtil = Uize.Widgets.CssUtil;
%>
.`` {
	position: relative;
}

.`track`, .`trackFull`, .`trackEmpty`, .`trackLighting`, .`statusText` {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.`trackFull` {
	background: #0a0;
}

.`trackEmpty` {
	background: #222;
}

.`trackLighting` {
	background: linear-gradient(to bottom, rgba(255,255,255,0.35) 0%,rgba(220,235,255,0.15) 42%,rgba(117,117,117,0.15) 50%,rgba(14,14,14,0.3) 100%);
}

.`statusText` {
	border-width: 1px;
	border-style: solid;
	border-color: #eee #666 #666 #eee;
	color: #eee;
	<%= _cssUtil.pseudoStroke ('rgba(0,0,0,.4)') %>
	text-align: center;
}

/*** different sizes ***/
<%
	var _sizes = Uize.Widgets.CssUtil.sizes;
%>
	.`tiny` {
		height: <%= _sizes.tiny.outer %>px;
	}
	.`tiny` .`statusText` {
		font-size: <%= _sizes.tiny.font %>px;
		line-height: 20px;
	}

	.`small` {
		height: <%= _sizes.small.outer %>px;
	}
	.`small` .`statusText` {
		font-size: <%= _sizes.small.font %>px;
		line-height: 24px;
	}

	.`medium` {
		height: <%= _sizes.medium.outer %>px;
	}
	.`medium` .`statusText` {
		font-size: <%= _sizes.medium.font %>px;
		line-height: 34px;
		letter-spacing: 1px;
	}

	.`large` {
		height: <%= _sizes.large.outer %>px;
	}
	.`large` .`statusText` {
		font-size: <%= _sizes.large.font %>px;
		line-height: 46px;
		letter-spacing: 2px;
	}