.container { svg { overflow: visible; } :global(#custom-cursor-hint) { background-color: var(--cursor-background-color); } :global(#custom-cursor-bg-hint) { background-color: var(--section-background-color); } img { // display: inline-block !important; min-height: calc(80PX * var(--osdm-zoom)); margin: auto; aspect-ratio: unset; margin-top: calc(-20PX * var(--osdm-zoom)); content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'); background-color: var(--cursor-background-color); background-repeat: repeat-y; background-position-x: calc(15PX * var(--osdm-zoom)); width: calc(10PX * var(--osdm-zoom)); transform: translateX(calc(10PX * var(--osdm-zoom))); border-radius: calc(4PX * var(--osdm-zoom)); overflow: hidden; } } :global(.hideCursor) { .container{ img{ opacity: 0; } } } :global(.eyeProtection) { .container { :global(#custom-cursor-hint) { background-color: var(--eye-cursor-background-color) !important; } :global(#custom-cursor-bg-hint) { background-color: var(--eye-section-background-color) !important; } img { background-color: var(--eye-cursor-background-color); } } } .container.eyeProtection { background-color: #fff0d6; }