@import "../bootstrap/scss/_functions";
@import "../base/_functions";
@import "../base/_variables";
@import "../bootstrap/scss/_variables";
@import "../bootstrap/scss/_mixins";

// Variables
.ui-spinner {
	position: relative;
	display: inline-block;
}

.ui-spinner-input {
	width: 90px;
	padding-right: 25px;
	-moz-appearance:textfield;

	&::-webkit-inner-spin-button {
		display: none;
	}
}

.ui-spinner-button {
	position: absolute;
	right: 6px;
	width: 15px;
	height: 15px;
	cursor: pointer;
	z-index: 3;
	transition: $transition-base;

	.ui-button-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
	}

	&.ui-spinner-up {
		top: 7px;

		.ui-button-icon {
			border-bottom: 8px solid $gray-400;
		}
	}

	&.ui-spinner-down {
		bottom: 7px;
		.ui-button-icon {
			border-top: 8px solid $gray-400;
		}
	}

	&.ui-spinner-up.ui-button-icon:hover { border-bottom-color: $primary; }
	&.ui-spinner-down.ui-button-icon:hover { border-top-color: $primary; }
}


// Desktop context
.desktop {
	.ui-spinner-button {
		opacity: 0;
	}

	.ui-spinner {
		&:hover {
			.ui-spinner-button {
				opacity: 1;
			}
		}
	}
}