Automata/packages/design-system/src/css/input-number.scss

@use 'mixins/mixins';
@use './common/var';
@use 'input';

@include mixins.b(input-number) {
	position: relative;
	display: inline-block;
	line-height: #{var.$input-height - 2};
	width: 100%;

	/* Chrome, Safari, Edge, Opera */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	/* Firefox */
	input[type='number'] {
		-moz-appearance: textfield !important;
	}

	.el-input {
		display: block;

		&__inner {
			-webkit-appearance: none;
			padding-left: #{var.$input-height + 10};
			padding-right: #{var.$input-height + 10};
			text-align: center;
		}
	}

	@include mixins.e((increase, decrease)) {
		--disabled-color: var(--color-text-light);
		position: absolute;
		z-index: 1;
		top: 1px;
		bottom: 1px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var.$input-height;
		height: auto;
		background: var.$background-color-base;
		color: var(--color-text-dark);
		cursor: pointer;
		font-size: 13px;

		&:hover {
			color: var(--color-primary);

			&:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
				border-color: var.$input-focus-border;
			}
		}

		&.is-disabled {
			color: var.$disabled-color-base;
			cursor: not-allowed;
		}
	}

	@include mixins.e(increase) {
		right: 1px;
		border-radius: 0 var.$input-number-control-border-radius var.$input-number-control-border-radius
			0;
		border-left: var(--border-base);
	}

	@include mixins.e(decrease) {
		left: 1px;
		border-radius: var.$input-number-control-border-radius 0 0
			var.$input-number-control-border-radius;
		border-right: var(--border-base);
	}

	@include mixins.when(disabled) {
		@include mixins.e((increase, decrease)) {
			border-color: var.$disabled-border-base;
			color: var.$disabled-border-base;

			&:hover {
				color: var.$disabled-border-base;
				cursor: not-allowed;
			}
		}
	}

	@include mixins.m(medium) {
		line-height: #{var.$input-medium-height - 4};

		@include mixins.e((increase, decrease)) {
			width: var.$input-medium-height;
			font-size: var.$input-medium-font-size;
		}

		.el-input__inner {
			padding-left: #{var.$input-medium-height + 7};
			padding-right: #{var.$input-medium-height + 7};
		}
	}

	@include mixins.m(small) {
		line-height: #{var.$input-small-height - 4};

		@include mixins.e((increase, decrease)) {
			width: var.$input-small-height;
			font-size: var.$input-small-font-size;

			[class*='el-icon'] {
				transform: scale(0.9);
			}
		}

		.el-input__inner {
			padding-left: #{var.$input-small-height + 7};
			padding-right: #{var.$input-small-height + 7};
		}
	}

	@include mixins.m(mini) {
		line-height: #{var.$input-mini-height - 4};

		@include mixins.e((increase, decrease)) {
			width: var.$input-mini-height;
			font-size: var.$input-mini-font-size;

			[class*='el-icon'] {
				transform: scale(0.8);
			}
		}

		.el-input__inner {
			padding-left: #{var.$input-mini-height + 7};
			padding-right: #{var.$input-mini-height + 7};
		}
	}

	@include mixins.when(without-controls) {
		.el-input__inner {
			text-align: left;
			padding-left: var(--spacing-2xs);
			padding-right: var(--spacing-2xs);
		}
	}

	@include mixins.when(controls-right) {
		.el-input__inner {
			padding-left: var(--spacing-2xs);
			padding-right: #{var.$input-height + 4};
		}

		&.el-input-number--medium .el-input__inner {
			padding-right: #{var.$input-medium-height + 4};
		}

		&.el-input-number--small .el-input__inner {
			padding-right: #{var.$input-small-height + 4};
		}

		&.el-input-number--mini .el-input__inner {
			padding-left: var(--spacing-4xs);
			padding-right: #{var.$input-mini-height + 4};
		}

		@include mixins.e((increase, decrease)) {
			height: calc((100% - 1px) / 2);
			bottom: auto;

			[class*='el-icon'] {
				transform: scale(0.8);
			}
		}

		@include mixins.e(increase) {
			border-radius: 0 var.$input-number-control-border-radius 0 0;
			border-bottom: var(--border-base);
		}

		@include mixins.e(decrease) {
			right: 1px;
			bottom: 1px;
			top: auto;
			left: auto;
			border-right: none;
			border-left: var(--border-base);
			border-radius: 0 0 var.$input-number-control-border-radius 0;
		}
	}
}