@RotarySwitchSize: 128px;
@RotarySwitchButtonSize: 16px;

div.uwt-rotaryswitch
{
	position: relative;
	width: @RotarySwitchSize;

	&> div.uwt-rotaryswitch-indicator
	{
		left: 75%;
		top: 50%;
		height: 3px;
		width: 50%;

		position: absolute;
		transform-origin: 0px 0px;
		transition: all 0.3s;

		margin: -4px 0px;
	}
	&> ul
	{
		background-color: #fff;
		list-style-type: none;
		padding: 0px;
		margin: 0px;
		padding: 32px;
		position: relative;

		width: @RotarySwitchSize;
		height: @RotarySwitchSize;

		&> li
		{
			position: absolute;
			width: @RotarySwitchSize;
			height: @RotarySwitchSize;
			pointer-events: none;

			&> a
			{
				pointer-events: all;
				position: absolute;

				width: @RotarySwitchButtonSize;
				height: @RotarySwitchButtonSize;
			}
		}
	}
}

body:not(.uwt-javascript-disabled)
{
	div.uwt-rotaryswitch
	{
		&> select
		{
			display: none;
		}
	}
}
body.uwt-javascript-disabled
{
	div.uwt-rotaryswitch
	{
		&> ul
		{
			display: none;
		}
		&> div.uwt-rotaryswitch-indicator
		{
			display: none;
		}
	}
}