{"version":3,"file":"view.css","mappings":";;;AAOA;EACE;AANF;AAQE;EACE;AANJ;AAYI;EACE;AAVN;AAcE;EACE;AAZJ;AAeE;EACE;EACA;KAAA;UAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAbJ;AAeI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAbN;AAgBI;EAvDF;EACA;EACA;EACA;AA0CF;AAcI;EA3DF;OAAA;EACA;EACA;EACA;AAgDF;AAYI;EA/DF;UAAA;EACA;EACA;EACA;AAsDF;AAWE;EACE;UAAA;AATJ;AAYE;EACE;UAAA;AAVJ;AAaE;EACE;AAXJ;AAgBI;EACE;EACA;EACA;EACA;EACA;EACA;AAdN;AAiBI;EACE;EACA;EACA;EACA;EACA;EACA;AAfN,C","sources":["webpack:///./src/view.scss"],"sourcesContent":["@mixin thumb {\n  appearance: none;\n  inline-size: 4px;\n  block-size: 100%;\n  background-color: #000;\n}\n\n.juz-dualview {\n  display: grid;\n\n  > * {\n    grid-area: 1 / 1;\n  }\n\n  &:hover,\n  &:focus-within {\n\n    > .juz-dualview__range[type=\"range\"] {\n      opacity: 1;\n    }\n  }\n\n  :where(figure) {\n    margin-block-end: 0;\n  }\n\n  & input:is(&__range[type=\"range\"]) {\n    z-index: 1;\n    appearance: none;\n    background-color: transparent;\n    opacity: 0.5;\n    cursor: pointer;\n    border-radius: 0;\n    border: none;\n    padding: 0;\n    transition: opacity 0.2s ease-out;\n    position: relative;\n    overflow: hidden;\n\n    &:before {\n      content: \"\";\n      display: block;\n      width: 50px;\n      height: 50px;\n      position: absolute;\n      top: 50%;\n      left: var(--pos--juz-dualview, 50%);\n      transform: translate(-50%, -50%);\n      background-color: transparent;\n      background-image: url(\"./assets/slider-icon.svg\");\n      background-position: center;\n      background-repeat: no-repeat;\n      background-size: 50px;\n      z-index: -1;\n    }\n\n    &::-ms-thumb {\n      @include thumb;\n    }\n\n    &::-moz-range-thumb {\n      @include thumb;\n    }\n\n    &::-webkit-slider-thumb {\n      @include thumb;\n    }\n  }\n\n  > .juz-dualview__before {\n    mask: linear-gradient(to right, #000 0, var(--pos--juz-dualview, 50%), transparent 0);\n  }\n\n  > .juz-dualview__after {\n    mask: linear-gradient(to right, transparent 0, var(--pos--juz-dualview, 50%), #000 0);\n  }\n\n  &__description-text {\n    margin-block: 0;\n  }\n\n  &__toolbar {\n\n    &:not(:focus-within) {\n      position: absolute !important;\n      clip: rect(1px, 1px, 1px, 1px);\n      overflow: hidden;\n      height: 1px;\n      width: 1px;\n      word-wrap: normal;\n    }\n\n    &-description {\n      position: absolute !important;\n      clip: rect(1px, 1px, 1px, 1px);\n      overflow: hidden;\n      height: 1px;\n      width: 1px;\n      word-wrap: normal;\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}