@import url(~antd/lib/input-number/style/index-pure.less);
@import './mixin.less';
@import '../../style/themes/index.less';
@import '../../input/style/mixin.less';

@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
@input-number-background: @input-bg;
@icon-prefix-cls: ~'@{ant-prefix}-icon';

// inline样式
.@{input-number-prefix-cls} {
	&-inline {
		padding-right: 0 !important;

		input {
			padding: 0;
			text-align: center;
		}
	}

	&-inline &-handler-wrap {
		position: relative;
		width: 100%;
		height: calc(@input-height-md - 2px);
		border-radius: calc(@border-radius-base / 2);

		.@{icon-prefix-cls} {
			font-size: @iconfont-size-sm;
		}
	}

	&-inline &-input-wrap {
		width: calc(100% - 2 * @input-height-md);
		position: absolute;
		top: 0;
		left: @input-height-md;
	}

	&-inline &-handler {
		width: @input-height-md - 1px;
		position: absolute;

		.@{icon-prefix-cls} {
			top: 50%;
			bottom: initial;
			transform: translate(-50%, -50%);
		}

		&-up {
			top: 0;
			right: 0;
			border-bottom-right-radius: @border-radius-base;
		}

		&-down {
			left: 0;
			top: 0;
			border-bottom-right-radius: 0px;
			border-top-left-radius: @border-radius-base;
			border-bottom-left-radius: @border-radius-base;
		}

		&-up {
			&:hover,
			&:focus,
			&:active {
				border-left-color: transparent;
			}
		}
		&-down {
			&:hover,
			&:focus,
			&:active {
				border-right-color: transparent !important;
			}
		}
	}

	&-inline &-handler,
	&-inline &-handler-up:hover,
	&-inline &-handler-down:hover,
	&-inline &-handler-wrap:hover &-handler {
		height: 100% !important;
	}

	&-inline&-focused &-handler-up:hover {
		border-bottom-color: @input-number-focus-border-color;
	}

	&-inline&-focused &-handler-down:hover {
		border-left-color: @input-number-focus-border-color;
		border-top-color: @input-number-focus-border-color;
		border-right-color: @input-hover-border-color;
	}
	&-inline&-focused &-handler-down:active {
		border-right-color: @input-number-focus-border-color;
	}

	&-inline&-error&-inline&-focused &-handler-up:hover {
		border-bottom-color: @danger-color;
	}

	&-inline&-error&-inline&-focused &-handler-down:hover {
		border-left-color: @danger-color;
		border-top-color: @danger-color;
	}

	//尺寸

	&-xs&-inline &-handler {
		width: @input-height-xs;
	}

	&-sm&-inline &-handler {
		width: @input-height-sm;
	}

	&-lg&-inline &-handler {
		width: @input-height-large;
	}

	&-xs&-inline &-wrap {
		width: calc(100% - 2 * @input-height-xs);
		left: @input-height-xs;
	}

	&-sm&-inline &-wrap {
		width: calc(100% - 2 * @input-height-sm);
		left: @input-height-sm;
	}

	&-lg&-inline &-wrap {
		width: calc(100% - 2 * @input-height-large);
		left: @input-height-large;
	}

	&-xs&-inline &-handler-wrap {
		height: calc(@input-height-xs - 2px);
	}

	&-sm&-inline &-handler-wrap {
		height: calc(@input-height-sm - 2px);
	}

	&-lg&-inline &-handler-wrap {
		height: calc(@input-height-large - 2px);
	}
}

// affix-focus样式
.@{input-number-prefix-cls} {
	&-affix-wrapper {
		width: 140px;

		&-focused,
		&:focus {
			&,
			&:hover {
				.bd-active() !important;
				box-shadow: none !important;
			}
		}
	}
}