{"version":3,"sourceRoot":"","sources":["file:///Users/stamat/Sites/localhost/compare-images-slider/src/styles/theme.scss"],"names":[],"mappings":";AASA;AAAA;EAOE;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAGA;;AAEA;AAAA;EACE;EACA;EACA;EACA;;AAMJ;AAAA;EACE;EACA;;AAKA;AAAA;AAAA;EACE","sourcesContent":["// The optional look for the handle: a round knob carrying an icon of your own, painted\n// in the page's palette rather than the black on white `index.scss` falls back to. It is\n// not in that stylesheet and not in the bundle, because a light-DOM element cannot scope\n// a look away from a page that never asked for one. Import this when you want it.\n//\n// The knob is markup - `<span class=\"compare-images-slider-handle-knob\">` inside the handle, with your svg\n// inside that - so the icon stays yours. A handle without one keeps the `↔` glyph the\n// base stylesheet draws, which is why every rule here is behind `:has(.compare-images-slider-handle-knob)`.\n\n.compare-images-slider,\ncompare-images-slider {\n  // The system pair, so the knob inverts with the page instead of staying white on a\n  // dark one, and is repainted rather than lost in forced-colors mode. It reads the\n  // page's `color-scheme`, so a page that themes in custom properties without also\n  // declaring one keeps a light `Canvas` when it goes dark - point these two at that\n  // page's own tokens instead, which is one line and what the docs page does.\n  --compare-images-slider-handle-bg: Canvas;\n  --compare-images-slider-handle-fg: CanvasText;\n\n  .compare-images-slider-handle:has(.compare-images-slider-handle-knob)::after {\n    display: none;\n  }\n\n  .compare-images-slider-handle-knob {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: var(--compare-images-slider-handle-size);\n    height: var(--compare-images-slider-handle-size);\n    transform: translate3d(-50%, -50%, 0);\n\n    background: var(--compare-images-slider-handle-bg);\n    color: var(--compare-images-slider-handle-fg);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    // Round at whatever size the property is set to, where the glyph's own radius is a\n    // fixed 21px that stops being a circle the moment the handle is resized.\n    border-radius: 50%;\n\n    svg {\n      width: 24px;\n      height: 24px;\n      fill: currentColor;\n      margin-top: 1px; // optical centering for the ↔ glyph, which is a bit high in its box\n    }\n  }\n\n  // The base stylesheet outlines the glyph, and the glyph is gone here - without this\n  // the handle keeps focus and shows nothing for it.\n  .compare-images-slider-handle:focus-visible .compare-images-slider-handle-knob {\n    outline: 3px solid Highlight;\n    outline-offset: 2px;\n  }\n\n  &[data-vertical],\n  &[vertical] {\n    .compare-images-slider-handle-knob {\n      transform: translate3d(-50%, -50%, 0) rotate(90deg);\n    }\n  }\n}\n"]}