/**
 * Вид «Отрез ткани» — gm_cart_ui / Prostore
 */

.gm-fabric-buy {
	--gm-fabric-text: #343434;
	--gm-fabric-muted: #888;
	--gm-fabric-border: #ededf3;
	--gm-fabric-surface: #fff;

	width: 100%;
	max-width: 42rem;
	text-align: left;
}

.gm-fabric-preview {
	--gm-fabric-text: #343434;
	--length-ratio: 0.35;
}

.gm-fabric-buy > .ui-add-to-cart {
	margin-top: 0;
}

.gm-fabric-mini {
	padding: 0 0 0.5rem;
}

.gm-fabric-mini__diagram {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
}

.gm-fabric-mini__dim-v {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 0 0 3.2rem;
	height: 6.4rem;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--gm-fabric-text);
	white-space: nowrap;
}

.gm-fabric-mini__dim-v::before,
.gm-fabric-mini__dim-v::after {
	content: "";
	flex: 1;
	width: 1px;
	background: var(--gm-fabric-text);
}

.gm-fabric-mini__body {
	flex: 1;
	min-width: 0;
}

.gm-fabric-mini__rect {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(30% + 70% * var(--length-ratio, 0.35));
	min-width: 5.5rem;
	max-width: 100%;
	height: 6.4rem;
	border: 2px solid var(--gm-fabric-text);
	background:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 5px,
			rgba(0, 0, 0, 0.035) 5px,
			rgba(0, 0, 0, 0.035) 6px
		),
		#fafafa;
	transition: width 0.2s ease;
}

.gm-fabric-mini__rect-area {
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--gm-fabric-text);
	line-height: 1.2;
	text-align: center;
	padding: 0 0.6rem;
	pointer-events: none;
}

.gm-fabric-mini__dim-h {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.8rem;
	width: calc(30% + 70% * var(--length-ratio, 0.35));
	min-width: 5.5rem;
	max-width: 100%;
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--gm-fabric-text);
}

.gm-fabric-mini__dim-h::before,
.gm-fabric-mini__dim-h::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--gm-fabric-text);
}

.gm-fabric-length.ui-number {
	position: relative;
	margin: 0;
}

.gm-fabric-length .ui-number__input {
	color: transparent;
	-webkit-text-fill-color: transparent;
	caret-color: transparent;
}

.gm-fabric-length__label {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	bottom: 0.4rem;
	left: 0.4rem;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 2.4rem;
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--gm-fabric-text);
	text-align: center;
	white-space: nowrap;
	pointer-events: none;
}

.ui-add-to-cart.is-active .gm-fabric-length.ui-number {
	width: 10.8rem;
}

.header__cart-item-number .gm-fabric-length.ui-number,
.cart__item-number .gm-fabric-length.ui-number {
	position: relative;
	width: 100%;
}

.cart__item-number--fabric .gm-fabric-length__label,
.header__cart-item-number--fabric .gm-fabric-length__label {
	font-size: 1.35rem;
	padding: 0 2.8rem;
}

.cart__item-number--fabric .ui-number__decrease,
.cart__item-number--fabric .ui-number__increase,
.header__cart-item-number--fabric .ui-number__decrease,
.header__cart-item-number--fabric .ui-number__increase {
	z-index: 2;
}

@media (min-width: 1200px) {
	.cart__item-number--fabric {
		width: 13rem;
	}
}

.ui-add-to-cart .ui-number.gm-fabric-length,
.products__item-action .ui-number.gm-fabric-length {
	position: relative;
}