.rc-switch {
	padding: 0 0.25rem;

	&__label {
		display: flex;

		margin-right: -0.25rem;
		margin-bottom: 0.5rem;
		margin-left: -0.25rem;

		align-items: center;
	}

	&--pink {
		& .rc-switch__button {
			border-color: #d7d7d7;
			background-color: var(--color-gray-light);
		}

		& .rc-switch__input {
			&:checked {
				& + .rc-switch__button {
					border-color: #D5156B !important;
					background-color: #D5156B !important;
				}
			}
		}
	}

	&--custom {
		& .rc-switch__button {
			border-color: #d7d7d7;
			background-color: var(--color-gray-light);
		}

		& .rc-switch__input {
			&:checked {
				& + .rc-switch__button {
					border-color: #D5156B !important;
					background-color: #D5156B !important;
				}
			}
		}
	}

	&__input {
		display: none;

		&:checked {
			& + .rc-switch__button {
				background-color: #D5156B;

				& .rc-switch__button-inside {
					transform: translate3d(13px, 2px, 0);
				}
			}
		}

		&:disabled {
			& + .rc-switch__button {
				cursor: default;

				border-color: var(--button-disabled-background);
				background-color: var(--rc-color-primary-lightest);
			}

			& ~ .rc-switch__text {
				cursor: default;
			}
		}
	}

	&__button {
		display: block;
		flex: 0 32px;

		width: 32px;
		height: 20px;
		margin-right: 0.25rem;
		margin-left: 0.25rem;

		cursor: pointer;
		transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);

		border-radius: 13px;
		background-color: var(--grey-gray-100, #F2F4F7);
	}

	&__button-inside {
		display: block;

		width: 16px;
		height: 16px;

		transition: all 0.2s cubic-bezier(0.65, 0.05, 0.36, 1);
		transform: translate3d(3px, 2px, 0);

		border-color: #f2f3f5;
		border-radius: 50%;
		background-color: var(--color-white);
	}

	&__text {
		flex: 1;

		margin-right: 0.25rem;
		margin-left: 0.25rem;

		cursor: pointer;

		color: var(--color-dark);

		font-size: var(--input-font-size);
	}

	&__description {
		color: var(--color-gray);

		font-size: var(--input-font-size);
	}
}

.rtl .rc-switch {
	&__button {
		margin-right: 0;
		margin-left: 0.5rem;
	}

	&__button-inside {
		transform: translate3d(-1px, 2px, 0);
	}

	&__input:checked + .rc-switch__button .rc-switch__button-inside {
		transform: translate3d(-13px, 2px, 0);
	}
}