{"version":3,"sourceRoot":"","sources":["file:///Users/stamat/Sites/localhost/compare-images-slider/src/styles/index.scss"],"names":[],"mappings":";;AAAA;EACE;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;AACA;AAAA;AAAA;EAGA;AAEA;AAAA;AAAA;EAGA;AAEA;AAAA;AAAA;;AAGA;AAAA;EACE;;AArBJ;AAAA;AAwBE;AAAA;AAAA;AAAA;;AAIA;AAAA;AAAA;EAEE;EACA;EACA;;AAhCJ;AAAA;AAmCE;AAAA;AAAA;AAAA;;AAIA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAEE;EACA;EACA;;AAIJ;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;AAAA;AAAA;EAGA;EACA;;AAGF;AAAA;EACE;;AAGF;AAAA;EAIE;EACA;;AAKA;AAAA;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;EACE","sourcesContent":[":root {\n  --compare-images-slider-initial-position: 50%;\n  --compare-images-slider-handle-bg: #fff;\n  --compare-images-slider-handle-fg: #000;\n  --compare-images-slider-handle-size: 42px;\n  --compare-images-slider-handle-font-size: 28px;\n}\n\n.compare-images-slider,\ncompare-images-slider {\n  display: block;\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  /* iOS pops the save-image sheet on a long press, which lands mid-drag on a slow\n     one. `-webkit-user-select: none` above suppresses it on its own in most builds;\n     this states it, rather than resting on a side effect that has regressed before. */\n  -webkit-touch-callout: none;\n\n  /* The live reveal position. The script writes it inline on every render, which beats\n     this declaration - so before the script has run, and with no script at all, the\n     reveal paints wherever `--compare-images-slider-initial-position` says. */\n  --compare-images-slider-position: var(--compare-images-slider-initial-position);\n\n  /* Kills the browser's native image drag, which otherwise carries a ghost off the\n     slider mid-gesture. Images only: a `<video controls>` or an embedded map has its\n     own pointer handling to lose, and neither has a drag ghost to suppress. */\n  img {\n    pointer-events: none;\n  }\n\n  /* The base layer is what gives the slider its size, and the reveal layer's copy has to lay\n     out identically over it or the two halves do not line up. `picture` is addressed\n     through its `img`, the wrapper itself having no box worth sizing. Anything else -\n     a div, an iframe, an svg sprite - is left to fill the reveal layer on its own terms. */\n  & > :is(img, video, canvas),\n  & > picture > img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  /* The reveal layer covers the whole slider and is clipped back to the current position, rather\n     than being sized to it. That is what keeps the overlay laying out at the same size as\n     the image underneath with no script measuring anything - sizing it instead\n     would need every child resized to the slider's width, on load and on every resize. */\n  .compare-images-slider-reveal {\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    -webkit-clip-path: inset(0 calc(100% - var(--compare-images-slider-position)) 0 0);\n    clip-path: inset(0 calc(100% - var(--compare-images-slider-position)) 0 0);\n\n    & > :is(img, video, canvas),\n    & > picture > img {\n      width: 100%;\n      height: auto;\n      display: block;\n    }\n  }\n\n  .compare-images-slider-handle {\n    position:absolute;\n    left: var(--compare-images-slider-position);\n    top:0;\n    bottom:0;\n    width: 2px;\n    margin-left: -1px;\n    height: 100%;\n    cursor: ew-resize;\n    z-index: 3;\n    touch-action: none;\n  }\n\n  .compare-images-slider-handle:after {\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    content:'↔';\n    font-size: var(--compare-images-slider-handle-font-size);\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    text-align: center;\n    border-radius: 21px;\n    /* Flex centres the line box, not the ink: the arrow sits on the math axis, below the\n       middle of ascent and descent, so it lands low. Half the padding is the nudge up, and\n       the amount is a knob - the glyph comes from whichever fallback font has U+2194. */\n    box-sizing: border-box;\n    padding-block-end: 0.08em;\n  }\n\n  .compare-images-slider-handle:focus-visible {\n    outline: none;\n  }\n\n  .compare-images-slider-handle:focus-visible:after {\n    // `Highlight` and not `-webkit-focus-ring-color`, which reads like the platform's ring\n    // and is not one: Chromium resolves the keyword to an orange of its own, so the ring came\n    // out orange on a page whose focus colour was blue everywhere else.\n    outline: 3px solid Highlight;\n    outline-offset: 2px;\n  }\n\n  &[data-vertical],\n  &[vertical] {\n    .compare-images-slider-reveal {\n      -webkit-clip-path: inset(0 0 calc(100% - var(--compare-images-slider-position)) 0);\n      clip-path: inset(0 0 calc(100% - var(--compare-images-slider-position)) 0);\n    }\n\n    .compare-images-slider-handle {\n      left: 0;\n      top: var(--compare-images-slider-position);\n      width: 100%;\n      height: 2px;\n      margin-top: -1px;\n      margin-left: 0;\n      cursor: ns-resize;\n    }\n\n    .compare-images-slider-handle:after {\n      content:'↕';\n    }\n  }\n}\n"]}