Automata/packages/design-system/src/css/switch.scss

@use "mixins/mixins";
@use "./common/var";

@include mixins.b(switch) {
	display: inline-flex;
	align-items: center;
	position: relative;
	font-size: var.$switch-font-size;
	line-height: var.$switch-height;
	height: var.$switch-height;
	vertical-align: middle;
	@include mixins.when(disabled) {
		& .el-switch__core,
		& .el-switch__label {
			cursor: not-allowed;
		}
	}

	@include mixins.e(label) {
		transition: 0.2s;
		height: var.$switch-height;
		display: inline-block;
		font-size: var.$switch-font-size;
		font-weight: 500;
		cursor: pointer;
		vertical-align: middle;
		color: var(--color-text-dark);

		@include mixins.when(active) {
			color: var(--color-primary);
		}

		@include mixins.m(left) {
			margin-right: 10px;
		}
		@include mixins.m(right) {
			margin-left: 10px;
		}
		& * {
			line-height: 1;
			font-size: var.$switch-font-size;
			display: inline-block;
		}
	}

	@include mixins.e(input) {
		position: absolute;
		width: 0;
		height: 0;
		opacity: 0;
		margin: 0;
	}

	@include mixins.e(core) {
		margin: 0;
		display: inline-block;
		position: relative;
		width: var.$switch-width;
		height: var.$switch-height;
		border: 1px solid var.$switch-off-color;
		outline: none;
		border-radius: var.$switch-core-border-radius;
		box-sizing: border-box;
		background: var.$switch-off-color;
		cursor: pointer;
		transition: border-color 0.1s, background-color 0.1s;
		vertical-align: middle;

		&:after {
			content: '';
			position: absolute;
			top: 1px;
			left: 1px;
			border-radius: var.$border-radius-circle;
			transition: all 0.1s;
			width: var.$switch-button-size;
			height: var.$switch-button-size;
			background-color: var.$color-white;
		}
	}

	@include mixins.when(checked) {
		.el-switch__core {
			border-color: var.$switch-on-color;
			background-color: var.$switch-on-color;
			&::after {
				left: 100%;
				margin-left: -(var.$switch-button-size) - 1px;
			}
		}
	}

	@include mixins.when(disabled) {
		opacity: 0.6;
	}

	@include mixins.m(wide) {
		.el-switch__label {
			&.el-switch__label--left {
				span {
					left: 10px;
				}
			}
			&.el-switch__label--right {
				span {
					right: 10px;
				}
			}
		}
	}

	& .label-fade-enter,
	& .label-fade-leave-active {
		opacity: 0;
	}
}