@import '../../style/themes/index';
@import '../../style/mixins/index';
@import '../../input/style/mixin';
@import './affix';
@import './status';

@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
@form-item-prefix-cls: ~'@{ant-prefix}-form-item';

.@{input-number-prefix-cls} {
	.reset-component();
	.input();

	//== Style for input-group: input with label, with button or dropdown...
	&-group {
		.reset-component();
		.input-group(~'@{input-number-prefix-cls}');

		&-wrapper {
			display: inline-block;
			text-align: start;
			vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
		}
	}

	position: relative;
	display: inline-block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: @border-width-base @border-style-base @border-color-base;
	border-radius: @border-radius-base;

	&-handler {
		position: relative;
		display: block;
		width: 100%;
		height: 50%;
		overflow: hidden;
		color: @text-color-secondary;
		font-weight: bold;
		line-height: 0;
		text-align: center;
		border-left: @border-width-base @border-style-base @input-number-handler-border-color;
		transition: all 0.1s linear;

		&:active {
			background: @input-number-handler-active-bg;
		}

		&:hover &-up-inner,
		&:hover &-down-inner {
			color: @input-number-handler-hover-bg;
		}
	}

	&-handler-up-inner,
	&-handler-down-inner {
		.iconfont-mixin();

		position: absolute;
		right: 4px;
		width: 12px;
		height: 12px;
		color: @text-color-secondary;
		line-height: 12px;
		transition: all 0.1s linear;
		user-select: none;
	}

	&:hover {
		.hover(@input-number-hover-border-color);
		& + .@{form-item-prefix-cls}-children-icon {
			opacity: 0;
			transition: opacity 0.24s linear 0.24s;
		}
	}

	&-focused {
		.active();
	}

	&-disabled {
		.disabled();
		.@{input-number-prefix-cls}-input {
			cursor: not-allowed;
		}
		.@{input-number-prefix-cls}-handler-wrap {
			display: none;
		}
	}

	&-readonly {
		.@{input-number-prefix-cls}-handler-wrap {
			display: none;
		}
	}

	&-input {
		width: 100%;
		height: @input-height-base - 2px;
		padding: 0 @control-padding-horizontal - 1px;
		text-align: left;
		background-color: transparent;
		border: 0;
		border-radius: @border-radius-base;
		outline: 0;
		transition: all 0.3s linear;
		appearance: textfield !important;
		.placeholder();

		&[type='number']::-webkit-inner-spin-button,
		&[type='number']::-webkit-outer-spin-button {
			margin: 0;
			/* stylelint-disable-next-line property-no-vendor-prefix */
			-webkit-appearance: none;
			appearance: none;
		}
	}

	&-lg {
		padding: 0;
		font-size: @font-size-lg;

		input {
			height: @input-height-lg - 2px;
		}
	}

	&-sm {
		padding: 0;

		input {
			height: @input-height-sm - 2px;
			padding: 0 @control-padding-horizontal-sm - 1px;
		}
	}

	&-handler-wrap {
		position: absolute;
		top: 0;
		right: 0;
		width: 22px;
		height: 100%;
		background: @input-number-handler-bg;
		border-radius: 0 @border-radius-base @border-radius-base 0;
		opacity: 0;
		transition: opacity 0.24s linear 0.1s;

		// Fix input number inside Menu makes icon too large
		// We arise the selector priority by nest selector here
		// https://github.com/ant-design/ant-design/issues/14367
		.@{input-number-prefix-cls}-handler {
			.@{input-number-prefix-cls}-handler-up-inner,
			.@{input-number-prefix-cls}-handler-down-inner {
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: auto;
				margin-right: 0;
				font-size: 7px;
			}
		}

		.@{input-number-prefix-cls}-borderless & {
			border-left-width: 0;
		}
	}

	&-handler-wrap:hover &-handler {
		height: 40%;
	}

	&:hover &-handler-wrap,
	&-focused &-handler-wrap {
		opacity: 1;
	}

	&-handler-up {
		border-top-right-radius: @border-radius-base;
		cursor: pointer;

		&-inner {
			top: 50%;
			margin-top: -5px;
			text-align: center;
		}

		&:hover {
			height: 60% !important;
		}
	}

	&-handler-down {
		top: 0;
		border-top: @border-width-base @border-style-base @border-color-base;
		border-bottom-right-radius: @border-radius-base;
		cursor: pointer;

		&-inner {
			top: 50%;
			text-align: center;
			transform: translateY(-50%);
		}

		&:hover {
			height: 60% !important;
		}
		.@{input-number-prefix-cls}-borderless & {
			border-top-width: 0;
		}
	}

	&-handler-up-disabled,
	&-handler-down-disabled {
		cursor: not-allowed;
	}

	&-handler-up-disabled:hover &-handler-up-inner,
	&-handler-down-disabled:hover &-handler-down-inner {
		color: @disabled-color;
	}

	&-borderless {
		box-shadow: none;
	}

	// ===================== Out Of Range =====================
	&-out-of-range {
		input {
			color: @error-color;
		}
	}
}

@import './rtl';