@import "mixins/mixins";
@import "common/var";
@import "input";

@include b(input-number) {
	position: relative;
	display: inline-block;
	width: 180px;
	line-height: #{$--input-height - 2};

	.el-input {
		display: block;

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

	@include e((increase, decrease)) {
		position: absolute;
		z-index: 1;
		top: 1px;
		width: $--input-height;
		height: auto;
		text-align: center;
		background: $--background-color-base;
		color: $--color-text-regular;
		cursor: pointer;
		font-size: 13px;

		&:hover {
			color: $--color-primary;

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

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

	@include e(increase) {
		right: 1px;
		border-radius: 0 $--border-radius-base $--border-radius-base 0;
		border-left: $--border-base;
	}

	@include e(decrease) {
		left: 1px;
		border-radius: $--border-radius-base 0 0 $--border-radius-base;
		border-right: $--border-base;
	}

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

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

	@include m(medium) {
		width: 200px;
		line-height: #{$--input-medium-height - 2};

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

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

	@include m(small) {
		width: 130px;
		line-height: #{$--input-small-height - 2};

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

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

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

	@include m(mini) {
		width: 130px;
		line-height: #{$--input-mini-height - 2};

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

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

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

	@include when(without-controls) {
		.el-input__inner {
			padding-left: 15px;
			padding-right: 15px;
		}
	}

	@include when(controls-right) {
		.el-input__inner {
			padding-left: 15px;
			padding-right: #{$--input-height + 10};
		}

		@include e((increase, decrease)) {
			height: auto;
			line-height: #{($--input-height - 2) * 0.5};

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

		@include e(increase) {
			border-radius: 0 $--border-radius-base 0 0;
			border-bottom: $--border-base;
		}

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

		&[class*=medium] {
			[class*=increase], [class*=decrease] {
				line-height: #{($--input-medium-height - 2) * 0.5};
			}
		}

		&[class*=small] {
			[class*=increase], [class*=decrease] {
				line-height: #{($--input-small-height - 2) * 0.5};
			}
		}

		&[class*=mini] {
			[class*=increase], [class*=decrease] {
				line-height: #{($--input-mini-height - 2) * 0.5};
			}
		}
	}

	@include when(with-unit) {
		position: relative;

		&::after {
			content: attr(data-unit);
			height: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			position: absolute;
			top: 0;
			right: 0;
			color: #606266;
			font-size: $--input-font-size;
			padding: 0 15px;
			border: $--border-base;
			background-color: $--background-color-base;
			border-top-right-radius: $--border-radius-base;
			border-bottom-right-radius: $--border-radius-base;
		}

		.el-input__inner {
			padding-right: 55px;
		}

		.el-input.is-disabled .el-input__inner {
			padding-right: 55px;
		}

		@include m(medium) {
			&::after {
				font-size: $--input-medium-font-size;
				padding: 0 14px;
			}

			.el-input__inner {
				padding-right: 52px;
			}

			.el-input.is-disabled .el-input__inner {
				padding-right: 52px;
			}
		}

		@include m(small) {
			&::after {
				font-size: $--input-small-font-size;
				padding: 0 12px;
			}

			.el-input__inner {
				padding-right: 46px;
			}

			.el-input.is-disabled .el-input__inner {
				padding-right: 46px;
			}
		}

		@include m(mini) {
			&::after {
				font-size: $--input-mini-font-size;
				padding: 0 10px;
			}

			.el-input__inner {
				padding-right: 40px;
			}

			.el-input.is-disabled .el-input__inner {
				padding-right: 40px;
			}
		}

		@include when(without-controls) {
			.el-input__inner {
				padding-left: 15px;
			}
		}
	}
}