@import "var";

:host{
	display: inline-block;
}
.@{prefixName}-numeric-input{
	.flex(@align-items: center);
	height: @numeric-input-height;
	color: @numeric-input-text-color;
	&__button{
		.flex(@align-items: center, @justify-content: center);
		width: @numeric-input-height;
		height: @numeric-input-height;
		box-sizing: border-box;
		background-color: @numeric-input-background-color;
		font-size: @numeric-input-button-size;
		padding-bottom: @numeric-input-padding-bottom;
		color: @numeric-input-button-text-color;

		position: relative;
		transition: opacity .3s ease;
		&::after{
			.border(1px, @numeric-input-border-color);
		}
		&.is-disabled{
			opacity: .3;
		}
	}
	&__input{
		width: @numeric-input-width;
		font-size: @numeric-input-text-size;
		height: @numeric-input-height;
		box-sizing: border-box;
		margin-left: @numeric-input-margin;
		margin-right: @numeric-input-margin;
		text-align: center;
		background-color: @numeric-input-background-color;

		position: relative;
		&::after{
			.border(1px, @numeric-input-border-color);
		}
		&.is-disabled{
			opacity: .3;
		}
	}
}