div.uwt-binaryswitch
{
	border: solid 1px var(--uwt-color-gray-400);

	&:not([disabled])
	{
		&:hover
		{
			border-color: var(--uwt-color-accent);
		}
		&> div.uwt-binaryswitch-switches
		{
			&> div.uwt-switch
			{
				&:hover
				{
					border-color: var(--uwt-color-gray-600);
					&> div.uwt-switch-indicator
					{
						background-color: var(--uwt-color-gray-600);
					}
				}
			}
		}	
	}
	
	&> div.uwt-binaryswitch-switches
	{
		&> div.uwt-switch
		{
			transition: all 0.3s;
			border: solid 1px var(--uwt-color-gray-400);
			&> div.uwt-switch-indicator
			{
				background-color: var(--uwt-color-gray-200);
			}
			&.uwt-selected
			{
				border-color: var(--uwt-color-accent);
				&> div.uwt-switch-indicator
				{
					background-color: var(--uwt-color-accent);
				}
			}
		}
	}
}
