/// @access private
/// @param {Boolean} $disabled Whether to output disabled state styling
/// @output styles for toggle based on a checkbox input
@mixin _oFormsToggle($disabled: null) {
	.o-forms-input--toggle {
		$toggle-width: $_o-forms-spacing-ten;
		> label {
			display: flex;
		}
		.o-forms-input__label {
			position: relative;
			display: inline-flex;
			flex-wrap: wrap;
			align-items: center;
			padding-left: #{$toggle-width + $_o-forms-spacing-two};
			min-height: $_o-forms-checkbox-radio-width;

			&:before,
			&:after {
				content: '';
				cursor: pointer;
				position: absolute;
				top: 0;
				left: 0;
			}

			&:before {
				background-color: _oFormsGet('toggle');
				border-radius: $_o-forms-spacing-ten;
				height: $_o-forms-checkbox-radio-width;
				width: $toggle-width;
			}

			&:after {
				@include oPrivateIconsContent(
					'cross',
					$color: _oFormsGet('default-text'),
					$size: null
				);
				background-color: oPrivateFoundationGet('o3-color-use-case-page-background');
				//stylelint-disable-next-line declaration-block-no-duplicate-properties
				background-color: var(
					--o-forms-toggle-handle-color,
					#{oPrivateFoundationGet('o3-color-use-case-page-background')}
				);
				border: $_o-forms-spacing-half solid _oFormsGet('default-text');
				border-radius: 50%;
				box-sizing: border-box;
				height: $_o-forms-checkbox-radio-width;
				width: $_o-forms-checkbox-radio-width;
				transition: left 75ms ease-in-out;
			}
		}

		input[type='checkbox'] {
			&:checked + .o-forms-input__label {
				&:before {
					background-color: _oFormsGet('toggle-selected');
				}
				&:after {
					@include oPrivateIconsContent(
						'tick',
						$size: null,
						$color: _oFormsGet('toggle-selected'),
						$include-base-styles: false
					);
					left: $_o-forms-spacing-four;
					border-color: _oFormsGet('toggle-selected');
				}
			}

			&:invalid:not(:disabled) + .o-forms-input__label:after {
				border-color: inherit;
			}

			// Undo focus styles applied to the checkbox input,
			// we style the label instead.
			&:focus,
			&:focus-visible {
				@include oPrivateNormaliseFocusUnsetContent();
			}

			&:focus {
				@include oPrivateNormaliseFocusUnsetContent();
				& + .o-forms-input__label:before {
					@include oPrivateNormaliseFocusContent();
				}
			}

			// Unset :focus styles where :focus-visible is supported.
			// Ideally we would set `:focus-visible` by default and use
			// `@supports not selector(:focus-visible)` to provide a
			// `:focus` fallback, however some of our supported browsers
			// do not understand `@supports: selector()`.
			@supports selector(:focus-visible) {
				&:focus + .o-forms-input__label:before {
					@include oPrivateNormaliseFocusUnsetContent();
				}

				&:focus-visible {
					& + .o-forms-input__label:before {
						@include oPrivateNormaliseFocusContent();
					}
				}
			}
		}

		@if $disabled {
			input[type='checkbox']:disabled + .o-forms-input__label {
				color: _oFormsGet('disabled-text');

				&:after {
					@include oPrivateIconsContent(
						'cross',
						$size: null,
						$color: black,
						$include-base-styles: false
					);
					border-color: _oFormsGet('toggle-disabled');
					background-color: _oFormsGet('toggle-knob-disabled');
				}

				&:before {
					background-color: _oFormsGet('toggle-disabled');
				}
			}
			input[type='checkbox']:disabled:checked + .o-forms-input__label {
				&:after {
					@include oPrivateIconsContent(
						'tick',
						$size: null,
						$color: black,
						$include-base-styles: false
					);
				}
			}
		}
	}
}