@import '../../style/themes/index';
@import './mixin.less';
@inputNumber-prefix-cls: ~'@{kd-prefix}-inputNumber';
.@{inputNumber-prefix-cls} {
  &-baseStep {
	  display: flex;
	  justify-content: center;
    align-items: center;
		box-sizing: border-box;
		height: 100%;
		cursor: pointer;
		&-small {
			.base-step-size(@input-number-small-height);
		}
		&-middle {
			.base-step-size(@input-number-middle-height);
		}
		&-large {
			.base-step-size(@input-number-large-height);
		}
		.@{inputNumber-prefix-cls}-icon {
			color: @input-number-color-text-baseStep;
			transition: color @duration-promptly;
		}
		&:hover .@{inputNumber-prefix-cls}-icon {
			color:@input-number-color-theme-5;
		}
	}
	&-baseStep-decrease {
		.step-style(right, left);
	}
	&-baseStep-increase {
		.step-style(left, right);
	}
	&-embedStep {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
		border-radius: 0 1px 1px 0;
		background-color: @input-number-color-text;
		overflow: hidden;
		.step-style(left, right);
		border: none;
		span {
			height: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			border-left: 1px solid @input-number-color-border-strong;
			border-bottom: 1px solid @input-number-color-border-strong;
			cursor: pointer;
			font-size: 12px;
			.@{inputNumber-prefix-cls}-icon {
				transition: color @duration-promptly;
				line-height: 1;
			}
			&:hover .@{inputNumber-prefix-cls}-icon {
				color:@input-number-color-theme-5;
			}
			&:last-child {
				border-bottom: none;
			}
		}
	}
}