.dx-toggle-container {
	display: inline-block;
	.dx-toggle {
		border: 1px solid var(--theme-core-control-border-color);
		background: var(--theme-core-control-background-color);
		border-radius: 6px;
		height: 26px;
		// width: 72px;
		padding: 0px 4px;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 2px;
		cursor: pointer;

		&:hover {
			.slider {
				border-color: var(--theme-core-control-focus-color);
			}
		}

		.icon {
			font-size: 10px;
			line-height: 0;
			margin: 0 5px;
			color: var(--theme-core-control-border-color);
		}

		.clear-placeholder {
			width: 19px;
			padding: 0 1px 0 0;
			margin: 0;
			display: block;
		}

		.slider {
			height: 22px;
			width: 22px;
			border-radius: 22px;
			background-color: var(--theme-core-control-punch-color);
			box-shadow: 0px 1px 2px var(--theme-core-box-shadow-color);
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid transparent;

			.icon {
				font-size: 10px;
				line-height: 0;
				color: var(--theme-core-control-background-color);
				padding: 0;
				margin: 0;
			}
		}
	}

	&.disabled {
		.dx-toggle {
			cursor: not-allowed;
			opacity: 0.7;
			border-color: var(--theme-core-control-border-color);
			color: var(--theme-core-control-background-color);

			&:hover {
				.slider {
					border-color: transparent;
				}
			}

			.slider {
				opacity: 0.7;
				color: var(--theme-core-control-background-color);
				background-color: var(--theme-core-control-punch-color);
			}
		}
	}
}