.hulk_affef_toggle_wrap {
	max-width: 100%;
	flex-basis: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	align-items: flex-start;
	position: relative;

	.hulk-toggle-field {
		display: flex;
		gap: 15px;
		align-items: center;
		--hulk-toggle-track-width: 36px;
		--hulk-toggle-track-height: 14px;
		--hulk-toggle-track-shape: calc(var(--hulk-toggle-track-height) / 2);
		--hulk-toggle-track-off-color: #ececec;
		--hulk-toggle-track-on-color: #cce5f1;
		--hulk-toggle-handle-width: 20px;
		--hulk-toggle-handle-height: 20px;
		--hulk-toggle-handle-offset: max(calc((var(--hulk-toggle-track-height) - var(--hulk-toggle-handle-height)) / 2), 0px);
		--hulk-toggle-handle-off-color: #fff;
		--hulk-toggle-handle-on-color: #007cba;
		--hulk-toggle-handle-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.24);
		--hulk-toggle-icon-off-color: #7a7a7a;
		--hulk-toggle-icon-on-color: #ffffff;
	}

	.hulk-toggle-field--ios {
		--hulk-toggle-track-width: 51px;
		--hulk-toggle-track-height: 31px;
		--hulk-toggle-track-off-color: rgba(120, 120, 128, 0.16);
		--hulk-toggle-track-on-color: #34C759;
		--hulk-toggle-handle-width: 27px;
		--hulk-toggle-handle-height: 27px;
		--hulk-toggle-handle-off-color: #fff;
		--hulk-toggle-handle-on-color: #fff;
		--hulk-toggle-handle-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06);
		--hulk-toggle-icon-off-color: #7a7a7a;
		--hulk-toggle-icon-on-color: #7a7a7a;
	}

	.hulk-toggle-field--carbon {
		--hulk-toggle-track-width: 48px;
		--hulk-toggle-track-height: 24px;
		--hulk-toggle-track-off-color: #8d8d8d;
		--hulk-toggle-track-on-color: #198038;
		--hulk-toggle-handle-width: 18px;
		--hulk-toggle-handle-height: 18px;
		--hulk-toggle-handle-off-color: #fff;
		--hulk-toggle-handle-on-color: #fff;
		--hulk-toggle-icon-off-color: #7a7a7a;
		--hulk-toggle-icon-on-color: #7a7a7a;
	}

	.hulk-toggle-field__input {
		display: none
	}

	.hulk-toggle-field__label {
		margin: 0;
		padding: 0;
		user-select: none;
	}

	.hulk-toggle-field__label--off, .hulk-toggle-field__label--on {
		cursor: pointer;
		transition: all 150ms linear
	}

	.hulk-toggle-field__label--active:before {
		content: attr(data-off)
	}

	.hulk-toggle-field__input--on:checked ~ .hulk-toggle-field__label--active:before {
		content: attr(data-on)
	}

	.hulk-toggle-field__control {
		position: relative;
		display: flex;
		align-items: center;
		flex-shrink: 0;
		flex-grow: 0;
		height: max(var(--hulk-toggle-track-height), var(--hulk-toggle-handle-height))
	}

	.hulk-toggle-field__track {
		width: var(--hulk-toggle-track-width);
		height: var(--hulk-toggle-track-height);
		background: var(--hulk-toggle-track-off-color);
		border-radius: var(--hulk-toggle-track-shape);
		transition: all 150ms linear
	}

	.hulk-toggle-field__input--on:checked ~ .hulk-toggle-field__control .hulk-toggle-field__track {
		background: var(--hulk-toggle-track-on-color)
	}

	.hulk-toggle-field__handle {
		position: absolute;
		top: 50%;
		left: var(--hulk-toggle-handle-offset);
		width: var(--hulk-toggle-handle-width);
		height: var(--hulk-toggle-handle-height);
		margin-top: calc(var(--hulk-toggle-handle-height) / -2);
		background: var(--hulk-toggle-handle-off-color);
		border-radius: 50%;
		box-shadow: var(--hulk-toggle-handle-shadow);
		transition: all 150ms linear;
		display: flex;
		align-items: center;
		justify-content: center;
		align-content: center;
		padding: 4px;

		svg {
			fill: currentColor;
		}
	}

	.hulk-toggle-field__handle-on {
		color: var(--hulk-toggle-icon-on-color);
	}

	.hulk-toggle-field__handle-off {
		color: var(--hulk-toggle-icon-off-color);
	}

	.hulk-toggle-field__input--on:checked ~ .hulk-toggle-field__control .hulk-toggle-field__handle {
		left: calc(100% - var(--hulk-toggle-handle-width) - var(--hulk-toggle-handle-offset));
		background: var(--hulk-toggle-handle-on-color)
	}

	.hulk-toggle-field__trigger {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		display: none;
		width: 100%;
		height: 100%;
		cursor: pointer;
		font-size: 0;
	}

	.hulk-toggle-field__input--off:checked ~ .hulk-toggle-field__control .hulk-toggle-field__trigger--on,
	.hulk-toggle-field__input--on:checked ~ .hulk-toggle-field__control .hulk-toggle-field__trigger--off {
		display: block
	}
}

.hulk_affef_toggle-field-group-layout-inline {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 20px;

	.hulk_affef_toggle_wrap {
		flex: auto;
	}
}