.ho-button-toggle-group
{
	.ho-button
	{
		padding: 2px !important;
		height: initial;
		border: 1px solid transparent;
		border-radius: 100%;
		background: transparent !important;
		transition: transform .41s var(--ease-out-quad);
		transform-origin: center center;

		.ho-button-label
		{
			position: absolute;
			visibility: hidden;
		}

		.ho-button-icon
		{
			width: 28px;
			height: 28px;
			border-radius: 100%;
			border: 1px solid black;
		}

		&:hover
		{
			transform: scale(1.1,1.1);
		}

		&.ho-button-toggle-black
		{
			.ho-button-icon
			{
				background: black;
			}

			border-color: var(--color-bg-white-60);
			transform: scale(1.1,1.1);
		}

		&.ho-button-toggle-white
		{
			.ho-button-icon
			{
				background: white;
			}
		}
	}
}

.single-object
{

}

.object-color-pattern-var--color-bg-white-var--color-fg-text-black
{
	.ho-button
	{
		&.ho-button-toggle-white
		{

			border-color: var(--color-bg-black-40);
			transform: scale(1.1,1.1);
		}

		&.ho-button-toggle-black
		{
			border-color: transparent;
			transform: scale(1);

			&:hover
			{
				transform: scale(1.1,1.1);
			}
		}
	}
}

.object-color-pattern-var--color-bg-black-var--color-fg-text-white
{
	.ho-button
	{
		&.ho-button-toggle-black
		{
			border-color: var(--color-bg-white-60);
			transform: scale(1.1,1.1);
		}

		&.ho-button-toggle-white
		{
			border-color: transparent;
			transform: scale(1);

			&:hover
			{
				transform: scale(1.1,1.1);
			}
		}
	}
}