.arrow-control{--arrow-control-size: 40px;position:relative;display:inline-grid;width:var(--arrow-control-size);height:var(--arrow-control-size);min-width:var(--arrow-control-size);min-height:var(--arrow-control-size);flex:0 0 var(--arrow-control-size);padding:0;place-items:center;color:var(--sc-primary-text);text-decoration:none;background:var(--sc-card-surface);border:0;border-radius:50%;corner-shape:round;box-shadow:var(--sc-control-surface-shadow);cursor:pointer;touch-action:manipulation;transition-property:color,background-color,box-shadow,transform,opacity;transition-duration:.15s;transition-timing-function:ease}.arrow-control:before{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;content:""}.arrow-control>span,.arrow-control>svg,.arrow-control>span>svg{display:block;width:18px;height:18px}.arrow-control--previous>span{transform:rotate(180deg)}.arrow-control:not(.arrow-control--previous)>svg,.arrow-control:not(.arrow-control--previous)>span>svg,.arrow-control--previous>span>svg{transform:translate(1px)}.arrow-control:focus-visible{outline:2px solid;outline-offset:3px}.arrow-control:disabled,.arrow-control[aria-disabled=true]{cursor:default;opacity:.32}.arrow-control:active:not(:disabled,[aria-disabled=true]){transform:scale(.96)}@media(hover:hover)and (pointer:fine){.arrow-control:hover:not(:disabled,[aria-disabled=true]){background:color-mix(in oklch,var(--sc-card-surface) 92%,var(--sc-primary-text));box-shadow:var(--sc-control-surface-shadow-hover);transition-duration:0s}}@media(prefers-reduced-motion:reduce){.arrow-control{transition:none}}@media(forced-colors:active){.arrow-control{color:ButtonText;background:ButtonFace;border:1px solid ButtonText;box-shadow:none}}
/*# sourceMappingURL=/cdn/shop/t/22/assets/arrow-controls.css.map */