switch.scss

@import "../style/base";
@import "switch-vars";

:host {
	--_switch-bg: #{$switch-bg};
	--_switch-color: #{$switch-color};

	background: var(--_switch-bg);
	color: var(--_switch-color);
	width: $switch-width;
	height: $switch-height;
	border-radius: $switch-border-radius;
	transition: $switch-transition;

	display: inline-flex;
	align-items: center;
	position: relative;
	outline: none;
	user-select: none;
}

:host(:not([disabled])) {
	cursor: pointer;
}

:host([checked]) {
	--_switch-bg: #{$switch-bg-checked};
	--_switch-color: #{$switch-color-checked};

	#knob {
		transform: translateX(calc(#{$switch-width} - 100%));
	}
}

/* Switch the color of the ripple to be the background color */
:host(:not([checked])) {
	#ripple {
		color: var(--_switch-bg);
	}
}

:host(:hover), :host(:focus) {
	will-change: background-color;
}

:host([disabled]) {
	--_switch-bg: #{$switch-bg-disabled};
	--_switch-color: #{$switch-color-disabled};
	pointer-events: none;
}

:host([disabled][checked]) {
	--_switch-bg: #{$switch-bg-disabled-checked};
	--_switch-color: #{$switch-color-disabled-checked};
}

#knob {
	width: $switch-knob-size;
	height: $switch-knob-size;
	border-radius: $switch-knob-border-radius;
	box-shadow: $switch-knob-elevation;
	transition: $switch-knob-transition;
	background: currentColor;
	position: absolute;
}

#ripple {
	transform: $switch-ripple-transform;
}