@mixin reset-button {
	border: 0;
	padding: 0;
	margin: 0;
	background: none transparent;
	box-shadow: none;

	&:focus {
		outline: 2px solid $gray-300;
	}
}

.wc-block-components-quantity-selector {
	display: flex;
	width: 107px;
	border: 1px solid $gray-300;
	background: #fff;
	border-radius: 4px;
	// needed so that buttons fill the container.
	box-sizing: content-box;
	margin: 0 0 0.25em 0;

	.has-dark-controls & {
		background-color: transparent;
		border-color: $input-border-dark;
	}

	// Extra label for specificity needed in the editor.
	input.wc-block-components-quantity-selector__input {
		@include font-size(regular);
		order: 2;
		min-width: 40px;
		flex: 1 1 auto;
		border: 0;
		padding: 0.4em 0;
		margin: 0;
		text-align: center;
		background: transparent;
		box-shadow: none;
		color: #000;
		line-height: 1;
		vertical-align: middle;
		-moz-appearance: textfield;

		&:focus {
			background: $gray-100;
			outline: 1px solid $gray-300;
		}
		&:disabled {
			color: $gray-600;
		}

		.has-dark-controls & {
			color: $input-text-dark;
			background: transparent;

			&:focus {
				background: transparent;
			}
			&:disabled {
				color: $input-disabled-dark;
			}
		}
	}
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	.wc-block-components-quantity-selector__button {
		@include reset-button;
		@include font-size(regular);
		min-width: 30px;
		cursor: pointer;
		color: $gray-900;
		font-style: normal;
		text-align: center;

		&:hover,
		&:focus {
			@include reset-button;
			color: $gray-900;
		}
		&:disabled {
			color: $gray-600;
			cursor: default;
			@include reset-button;
		}

		.has-dark-controls & {
			color: $input-text-dark;

			&:hover,
			&:focus {
				color: $input-text-dark;
			}
			&:disabled {
				color: $input-disabled-dark;
			}
		}
	}
	.wc-block-components-quantity-selector__button--minus {
		order: 1;
	}
	.wc-block-components-quantity-selector__button--plus {
		order: 3;
	}
}