pc-numberinput {
	display: inline-block;
	position: relative;
}

.pc_numbervalue_control {
	background: white;

	width: 40px;
	overflow: hidden;
	position: relative;
}

.pc_numbervalue_control > a {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

.pc_numbervalue_control > a:hover::after {
	background: var(--rd-secondary-active);
}

.pc_numbervalue_control > a::after {
	content: "";
	background-color: var(--rd-primary-active);
	display: block;
	-webkit-mask-image: url("/src/img/svg/plus_magenta.svg");
	mask-image: url("/src/img/svg/plus_magenta.svg");
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 14px;
	height: 15px;
}

.pc_numbervalue_control > a.pc_numbervalue_control_minus::after {
	-webkit-mask-image: url("/src/img/svg/minus_grey.svg");
	mask-image: url("/src/img/svg/minus_grey.svg");
}

[data-can-decrease="false"] .pc_numbervalue_control > a.pc_numbervalue_control_minus::after,
[data-can-increase="false"] .pc_numbervalue_control > a.pc_numbervalue_control_plus::after {
	background-color: var(--rd-input-default);
}

.pc_numbervalue_wrap {
	padding-right: 40px;
}

pc-numberinput .pc_numbervalue_wrap {
	padding-right: 0;
	display: flex;
}

.pc_numbervalue_control_minus_wrap {
	border: var(--rd-borderwidth-border-default) solid var(--rd-input-default);
	border-right: none;
	border-radius: var(--rd-borderradius-border-md) 0em 0em var(--rd-borderradius-border-md);
}

.pc_numbervalue_control_plus_wrap {
	border: var(--rd-borderwidth-border-default) solid var(--rd-input-default);
	border-left: none;
	border-radius: 0em var(--rd-borderradius-border-md) var(--rd-borderradius-border-md) 0em;
}

.pc_numbervalue_wrap > input {
	padding: var(--rd-spacing-sm);
	width: calc(100% - 40px);
	border: none !important;
	border-top: var(--rd-borderwidth-border-default) solid var(--rd-input-default) !important;
	border-bottom: var(--rd-borderwidth-border-default) solid var(--rd-input-default) !important;
	border-radius: 0 !important;
	font-size: var(--rd-fontsize-4);
	color: var(--rd-font-dark);
	text-align: center;
}
