.gs-toggle {
	display: inline-block;
	cursor: pointer;

	&--disabled {
		cursor: default;
	}

	& + :has(.gs-select-control.hidden) {
		display: none;
	}

	&__label {
		margin-left: 8px;
		vertical-align: middle;
	}

	.components-form-toggle {
		height: auto;
		vertical-align: middle;

		&__track {
			position: relative;
			flex: 0 0 42px;
			width: 42px;
			height: 22px;
			background-color: #f0f2f4;
			border: 1px solid #ced3d9;
			border-radius: 100px;
			box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, 0.05);
			transition: background-color 0.1s linear, justify-content 0.1s linear;
			overflow: initial;

			&::after {
				display: none;
			}

			&::before {
				box-sizing: border-box;
				content: "";
				position: absolute;
				left: 0;
				top: 0;
				width: 50%;
				height: 100%;
				border-radius: 100%;
				background-color: #fff;
				box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05);
				border: 1px solid #ced3d9;
				transition: background-color 0.1s linear, left 0.1s linear;
			}
		}

		&.is-checked {
			.components-form-toggle__track {
				background-color: #4ca74e;
				border-color: #4ca74e;

				&::before {
					left: 20px;
					border-color: #4ca74e;
				}
			}
		}

		&__thumb {
			display: none;
		}
	}
}