@use "sass:map";
// common mixins imported from this file
@import "./../../mixins/scss/mixins";
@import "./f-switch-variables";

:host {
	.f-switch-wrapper {
		overflow: visible;
	}
	.f-switch-section {
		overflow: visible;
		@each $size, $value in $sizes {
			&[size="#{$size}"] {
				slot[name="help"]::slotted(*) {
					padding-left: calc(map.get($value, "width") + 12px) !important;
				}
			}
		}
	}
	.f-switch {
		@include base();
		position: relative;
		display: inline-block;
		width: var(--form-switch-width);
		height: var(--form-switch-height);

		@each $size, $value in $sizes {
			&[size="#{$size}"] {
				width: map.get($value, "width");
				height: map.get($value, "height");
			}
		}
	}

	slot[name="help"]::slotted(*) {
		padding-left: calc(var(--form-switch-width) + 12px) !important;
	}

	.f-switch input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	.f-switch {
		.f-switch-slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: var(--color-neutral-secondary);
			-webkit-transition: var(--transition-time-delayed);
			transition: var(--transition-time-delayed);
			border-radius: 34px;
			&:hover {
				background-color: var(--color-neutral-secondary-hover);
			}
		}

		.f-switch-slider:before {
			position: absolute;
			content: "";
			height: var(--form-switch-slider-size);
			width: var(--form-switch-slider-size);
			left: 2px;
			top: 2px;
			background-color: var(--color-neutral-surface);
			-webkit-transition: var(--transition-time-delayed);
			transition: var(--transition-time-delayed);
			border-radius: 50%;
		}
		@each $size, $value in $sizes {
			&[size="#{$size}"] {
				.f-switch-slider:before {
					height: map.get($value, "slider");
					width: map.get($value, "slider");
				}
			}
		}

		@each $state, $color in $states {
			&[state="#{$state}"] {
				input[checked="true"] + .f-switch-slider {
					background-color: map.get($color, "background");
					&:hover {
						background-color: map.get($color, "background-hover");
					}
				}
			}
		}

		input[checked="true"] + .f-switch-slider:before {
			-webkit-transform: translateX(var(--form-switch-slider-translate));
			-ms-transform: translateX(var(--form-switch-slider-translate));
			transform: translateX(var(--form-switch-slider-translate));
		}

		@each $size, $value in $sizes {
			&[size="#{$size}"] {
				input[checked="true"] + .f-switch-slider:before {
					-webkit-transform: translateX(map.get($value, "translate-slider"));
					-ms-transform: translateX(map.get($value, "translate-slider"));
					transform: translateX(map.get($value, "translate-slider"));
				}
			}
		}
	}
	f-div.f-switch-section[disabled] {
		@include disabled();
		opacity: 1;
		pointer-events: none;
	}
}