@import "imports/utils.less";

	// Config

	@fs-number-background-color:						#fff;

	@fs-number-border-color:							#ccc;
	@fs-number-border-radius:							3px;

	@fs-number-font-size:								15px;
	@fs-number-text-color:								#222;

	@fs-number-margin:									0 0 10px 0;
	@fs-number-padding:									0 10px;

	@fs-number-arrow-width:								25px;
	@fs-number-arrow-color:								#666;
	@fs-number-arrow-size:								5px;

	// disabled

	@fs-number-disabled-border-color:					#ccc;
	@fs-number-disabled-text-color:						#ccc;
	@fs-number-disabled-background-color:				#fff;
	@fs-number-disabled-arrow-color:					#ccc;


	/**
	 * @class
	 * @name .fs-number-element
	 * @type element
	 * @description Target elmement
	 */

	/**
	 * @class
	 * @name .fs-number
	 * @type element
	 * @description Base widget class
	 */

	/**
	 * @class
	 * @name .fs-number.fs-number-disabled
	 * @type modifier
	 * @description Indicates disabled state
	 */

	.fs-number {
		position: relative;

		border-radius: @fs-number-border-radius;
		margin: @fs-number-margin;
		overflow: hidden;

		&,
		&:after,
		&:before,
		*,
		*:after,
		*:before {
			box-sizing: border-box;
			transition: none;
			user-select: none !important;
		}

		&-element {
			width: 100%;

			background: @fs-number-background-color;
			border: 1px solid @fs-number-border-color;
			border-radius: @fs-number-border-radius;
			color: @fs-number-text-color;
			font-size: @fs-number-font-size;
			line-height: 1;
			overflow: hidden;
			padding: @fs-number-padding;

			-moz-appearance: textfield;

			&::-webkit-inner-spin-button,
			&::-webkit-outer-spin-button {
				margin: 0;

				-webkit-appearance: none;
			}

			&::-ms-clear {
				display: none;
			}

			&:focus {
				background-color: @fs-number-background-color;
			}
		}

		&-disabled &-element {
			background: @fs-number-disabled-background-color;
			border-color: @fs-number-disabled-border-color;
			color: @fs-number-disabled-text-color;
		}

		/**
		 * @class
		 * @name .fs-number-arrow
		 * @type element
		 * @description Arrow elmement
		 */

		/**
		 * @class
		 * @name .fs-number-arrow:after
		 * @type element
		 * @description Arrow icon
		 */

		&-arrow {
			width: @fs-number-arrow-width;
			height: 50%;

			position: absolute;
			right: 0;
			z-index: 1;

			background: @fs-number-background-color;
			border: 1px solid @fs-number-border-color;
			cursor: pointer;
			display: block;
			overflow: hidden;
			text-indent: 200%;
			white-space: nowrap;

			.no-opacity & {
				text-indent: -999999px;
			}

			&:focus {
				outline: none;
			}

			&:after {
				width: 0;
				height: 0;

				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

				border-left:  @fs-number-arrow-size solid transparent;
				border-right: @fs-number-arrow-size solid transparent;
				content: '';
				display: block;
				margin: auto;
			}
		}

		/**
		 * @class
		 * @name .fs-number-arrow.fs-number-up
		 * @type modifier
		 * @description Indicates up state
		 */

		&-arrow&-up {
			top: 0;

			&:after {
				border-bottom: @fs-number-arrow-size solid @fs-number-arrow-color;
			}
		}

		/**
		 * @class
		 * @name .fs-number-arrow.fs-number-down
		 * @type modifier
		 * @description Indicates up state
		 */

		&-arrow&-down {
			bottom: 0;

			border-top: none;

			&:after {
				border-top: @fs-number-arrow-size solid @fs-number-arrow-color;
			}
		}

		&-disabled &-arrow {
			cursor: default;

			&:after {
				border-top-color: @fs-number-disabled-arrow-color;
				border-bottom-color: @fs-number-disabled-arrow-color;
			}
		}
	}

/*
	@media screen and (min-width: 740px) {
		.stepper:hover .stepper-input { background-color: #fff; }

		.stepper .stepper-step:hover { background-color: #F9F9F9; }

		.stepper.disabled .stepper-arrow { background: #fff; border-color: #eee; cursor: default; }
	}

	.stepper.disabled .stepper-input { background: #fff; border-color: #eee; color: #ccc; }
	.stepper.disabled .stepper-arrow { background: #fff; border-color: #eee; cursor: default; }
*/