div.uwt-binaryswitch
{
	&> div.uwt-binaryswitch-switches
	{
		background: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: center;
		&> div.uwt-switch
		{
			border: solid 1px #aaaaaa;
			cursor: pointer;

			user-select: none;

			margin: 16px 8px 8px 8px;
			&> label.uwt-switch-label
			{
				font-size: 8pt;
				position: absolute;
				top: -16px;
				text-align: center;
				display: block;
				width: 100%;
				box-sizing: border-box;
			}

			height: 48px;
			position: relative;
			width: 16px;
			&> div.uwt-switch-indicator
			{
				padding: 8px;
				background: #cccccc;
				height: 4px;
				position: absolute;
				top: 28px;
				width: 0px;
				transition: all 0.3s;
			}
			&.uwt-selected
			{
				background-color: #fff7cc;
				&> div.uwt-switch-indicator
				{
					top: 0px;
				}
			}
		}
	}
	&> input.uwt-binaryswitch-input, &> label.uwt-binaryswitch-label
	{
		width: 100%;
		box-sizing: border-box;
		border: none;
		text-align: center;
	}
	&> label.uwt-binaryswitch-label
	{
		display: none;
		cursor: text;
		padding: 8px;
		user-select: revert;
	}
	&[disabled]
	{
		&> div.uwt-binaryswitch-switches
		{
			background-color: var(--uwt-color-gray-300);
			&> div.uwt-switch
			{
				background-color: var(--uwt-color-gray-500);
				cursor: default;
				pointer-events: none;
				
				&> div.uwt-switch-indicator
				{
					background: #ffffff;
				}
			}
		}
		&> input.uwt-binaryswitch-input
		{
			display: none;
		}
		&> label.uwt-binaryswitch-label
		{
			display: block;
		}
	}
}
