@use "sass:math";

@include body-class(true) {

	.sui-toggle {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: relative;
		opacity: 1;
		pointer-events: none;

		input,
		.sui-toggle-slider,
		.sui-toggle-label {
			pointer-events: all;
		}

		.sui-toggle-slider,
		.sui-toggle-label {
			cursor: pointer;
		}

		input {
			@extend %sui-screen-reader-text;

			&:checked {

				~ .sui-toggle-slider {
					background-color: $blue;

					&:before {
						transform: translateX(#{$toggle-width - ($toggle-height - 2px) - 2px});
					}
				}
			}

			&[disabled] {

				~ .sui-toggle-slider {
					cursor: not-allowed;
					background-color: $overcast;

					&:before {
						background-color: $fiftyshades;
					}
				}

				~ .sui-description,
				~ .sui-toggle-label {
					cursor: initial;
					pointer-events: none;
				}
			}

			&:hover {

				~ .sui-toggle-slider {
					box-shadow: 0 0 0 5px $smoke;
				}

				&:checked ~ .sui-toggle-slider {
					box-shadow: 0 0 0 5px $blue-ghost;
				}

				&:focus {
					box-shadow: 0 0 0 5px $silver;

					&:checked ~ .sui-toggle-slider {
						box-shadow: 0 0 0 5px #D1EAF4;
					}
				}

				&[disabled] ~ .sui-toggle-slider {
					box-shadow: none;
				}
			}

			&:focus {

				~ .sui-toggle-slider {
					box-shadow: 0 0 0 5px $silver;
				}

				&:checked ~ .sui-toggle-slider {
					box-shadow: 0 0 0 5px #D1EAF4;
				}
			}

			@media (forced-colors: active) {
				~ .sui-toggle-slider {
					forced-color-adjust: none;
				}
			}

			@media (forced-colors: active) and (prefers-color-scheme: dark), (-ms-high-contrast: white-on-black) {
				&:checked {
					~ .sui-toggle-slider {
						background-color: map-get($button-background, orange) !important;
						&:before {
							background-color: $cloud;
						}
					}
				}
			}
		}

		// ELEMENT: Slider.
		.sui-toggle-slider {
			width: $toggle-width;
			height: $toggle-height;
			position: absolute;
			left: 0;
			top: 0;
			margin: math.div(($toggle-font-height - $toggle-height), 2) 0;
			padding: 0;
			border: 0;
			border-radius: math.div($toggle-height, 2);
			background-color: $fiftyshades;
			transition: $transition;
			opacity: 1;

			&:before {
				content: " ";
				width: #{$toggle-height - 2px};
				height: #{$toggle-height - 2px};
				position: absolute;
				top: 1px;
				left: 1px;
				border-radius: $toggle-height;
				background-color: $white;
				transition: 0.2s linear;
			}

			&:last-child,
			&.sui-toggle-slider--only {
				position: relative;
			}

			~ .sui-toggle-label,
			~ .sui-description {
				margin-left: #{$toggle-width + math.div($sui-gutter-md, 2)};
				pointer-events: all;
			}
		}

		// ELEMENT: Label.
		.sui-toggle-label {
			display: block;
			font: 500 #{$toggle-font-size}/#{$toggle-font-height} $font;
			letter-spacing: $font--letter-spacing;
		}

		// Support for old markup.
		+ label,
		+ .sui-toggle-label {
			position: relative;
			top: -3px;
			margin-left: math.div($sui-gutter-md, 2);
			font-weight: 500;
		}
	}

	.sui-toggle-content {
		opacity: 1;
		&, &.sui-border-frame {
			margin-left: #{$toggle-width + math.div($sui-gutter-md, 2)};
		}
	}
}