@layer components{
.qty{
display:grid;
grid-template-columns:28px 42px 28px;
align-items:center;
gap:var(--space-1);
width:112px;
height:32px;
padding:1px;
border:.5px solid rgb(var(--rgb-line) / .18);
border-radius:var(--radius-sm);
background:var(--c-surface);
}
.qty:focus-within{
border-color:rgb(var(--rgb-primary) / .24);
background:rgb(var(--rgb-surface) / .82);
}
.qty button{
display:grid;
place-items:center;
width:28px;
height:28px;
border-radius:var(--radius-xs);
color:var(--n-58);
transition:color var(--time-fast) ease,background var(--time-fast) ease;
}
.qty button:hover{
color:var(--c-blue);
background:var(--c-blue-06);
}
.qty button svg{
width:var(--icon-xs);
height:var(--icon-xs);
}
.qty input{
width:42px;
height:26px;
border:0;
border-radius:var(--radius-xs);
background:rgb(var(--rgb-surface-soft) / .72);
color:var(--n-54);
text-align:center;
font-size:var(--text-xs);
font-weight:var(--w-medium);
font-variant-numeric:tabular-nums;
appearance:textfield;
}
.qty input:focus,.qty input:focus-visible{
outline:0!important;
box-shadow:none!important;
color:var(--c-primary)!important;
background:var(--c-surface);
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
appearance:none;
margin:0;
}
.icon-btn,.icon-btn.ghost,.icon-btn.remove{
position:relative;
display:grid;
place-items:center;
flex:0 0 auto;
width:28px;
height:28px;
border:.5px solid transparent;
border-radius:var(--radius-sm);
background:transparent;
color:var(--c-blue);
box-shadow:none;
opacity:.92;
transition:color var(--time-fast) ease,border-color var(--time-fast) ease,background var(--time-fast) ease,transform var(--time-fast) ease,opacity var(--time-fast) ease;
}
.icon-btn.remove{
color:var(--c-red);
}
.icon-btn[hidden]{
display:none!important;
}
.icon-btn:hover,.icon-btn.ghost:hover{
color:var(--c-blue);
border-color:var(--c-blue-16);
background:var(--c-blue-04);
scale:var(--button-hover-scale);
opacity:1;
}
.icon-btn.remove:hover,.icon-btn.remove:focus-visible{
color:var(--c-surface)!important;
background:var(--c-danger)!important;
border-color:var(--c-danger)!important;
scale:var(--button-hover-scale);
}
.icon-btn svg,.icon-btn.remove svg,.icon-btn.ghost svg{
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:1.25;
stroke-linecap:round;
stroke-linejoin:round;
overflow:visible;
}
.icon-btn::after{
content:attr(aria-label);
position:absolute;
right:50%;
top:calc(100% + 7px);
z-index:25;
padding:5px 7px;
border:.5px solid var(--line-08);
border-radius:var(--radius-xs);
background:rgb(var(--rgb-surface) / .96);
color:var(--n-70);
box-shadow:var(--shadow-sm);
font-size:var(--text-2xs);
font-weight:var(--w-medium);
line-height:1;
white-space:nowrap;
opacity:0;
pointer-events:none;
transform:translate(50%,-3px) scale(.98);
transition:opacity var(--time-fast) ease,transform var(--time-fast) var(--ease-out);
}
.icon-btn:hover::after,.icon-btn:focus-visible::after{
opacity:1;
transform:translate(50%,0) scale(1);
}
.icon-btn.hint-up::after,.icon-btn[data-hint-flow="up"]::after{
top:auto!important;
bottom:calc(100% + 7px)!important;
transform:translate(50%,3px) scale(.98)!important;
}
.icon-btn.hint-up:hover::after,.icon-btn.hint-up:focus-visible::after,.icon-btn[data-hint-flow="up"]:hover::after,.icon-btn[data-hint-flow="up"]:focus-visible::after{
transform:translate(50%,0) scale(1)!important;
}
}