@layer code-components{.quantity{background-color:var(--color-white);border-radius:.5rem;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative}.quantity__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;color:currentColor;font-size:.875rem;font-weight:700;height:2.5rem;line-height:1.3125rem;opacity:.8;padding:0;text-align:center;width:2.5rem}.quantity__input,.quantity__input:focus{border-style:none}.quantity__input::-webkit-inner-spin-button,.quantity__input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}.quantity__input:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 rgba(0,0,0,0);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),0 0 rgba(0,0,0,0);-webkit-box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 rgba(0,0,0,0));box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 rgba(0,0,0,0))}.quantity__input[type=number]{-moz-appearance:textfield}.quantity__input--small{height:2rem;width:1.5rem}@media (min-width:480px){.quantity__input--small{width:2rem}}.quantity__button{-ms-flex-negative:0;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;background-color:var(--color-white);border-color:var(--border-color-default);color:var(--color-black);cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;flex-shrink:0;height:2.5rem;justify-content:center;padding:0;-webkit-transition-duration:.15s;transition-duration:.15s;-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);width:2.5rem}.quantity__button:first-child{border-bottom-left-radius:.5rem;border-top-left-radius:.5rem}.quantity__button:last-child{border-bottom-right-radius:.5rem;border-top-right-radius:.5rem}.quantity__button:active,.quantity__button:hover{background-color:var(--color-black);border-color:var(--color-primary);color:var(--color-white)}.quantity__button:active .icon,.quantity__button:hover .icon{--tw-scale-x:1;--tw-scale-y:1;-webkit-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-ms-transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.quantity__button:disabled{opacity:.5;pointer-events:none}.quantity__button .icon{pointer-events:none;-webkit-transition-duration:75ms;transition-duration:75ms;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(.4,0,.2,1);-webkit-transition-timing-function:linear;transition-timing-function:linear}.quantity__button--small{height:2rem;width:1.5rem}@media (min-width:480px){.quantity__button--small{width:2rem}}.quantity__button--small .icon{height:.75rem;width:.75rem}.quantity__select{border-color:var(--color-accent);border-radius:9999px}}