paginar 0.3.3 → 0.3.4

package/dist/index.es.js

@@ -11607,7 +11607,7 @@ return (_ctx, _cache) => {
 };
 const FootnotesAside = /*#__PURE__*/_export_sfc(_sfc_main$1, [['__scopeId',"data-v-5391e486"]]);
 
-const _style_0 = ".border-primary { border-color: var(--theme-primary, #690000);\n}\n.text-primary { color: var(--theme-primary, #690000);\n}\n.bg-primary { background-color: var(--theme-primary, #690000);\n}\n.border-primary-extralight { border-color: var(--theme-primary-extralight, #f3f4f6);\n}\n.text-primary-extralight { color: var(--theme-primary-extralight, #f3f4f6);\n}\n.bg-primary-extralight { background-color: var(--theme-primary-extralight, #f3f4f6);\n}\n.border-secondary { border-color: var(--theme-secondary, #ffa03c);\n}\n.text-secondary { color: var(--theme-secondary, #ffa03c);\n}\n.bg-secondary { background-color: var(--theme-secondary, #ffa03c);\n}\n.rootWrapper {\r\n\tmax-height: 100%;\r\n    height: 100%;\n}\nmain#rootComponent {\r\n\theight: 100%;\r\n\tmax-height: 100%;\n}\nmain#rootComponent.light {\r\n\t\tbackground-color: var(--bg-light-mode, #fff7e0)\n}\nmain#rootComponent.dark {\r\n\t\tbackground-color: var(--bg-dark-mode, #2d2d2d);\n}\nmain#rootComponent.dark #content-area {\r\n\t\t\tcolor: #fff\n}\nheader.wrapper {\r\n\twidth: 200px;\r\n\tmargin: 0 auto;\n}\n#engine {\r\n\theight: calc(100% - 8.4rem);\r\n\tposition: relative;\r\n    right: 0;\r\n    left: 0;\r\n    bottom: 0;\r\n    width: 100%;\n}\n.rootWrapper.safari {\r\n\tmax-height: initial;\r\n\theight: initial;\n}\n.rootWrapper.safari #engine {\r\n\theight: auto !important;\n}\n#reader-component {\r\n\twidth: 100%;\n}\n.typeArea {\r\n\twidth: 100%;\n}\n.engineWrapper {\r\n\theight: 100%;\r\n    display: flex;\r\n    justify-content: space-between;\r\n\tposition: relative;\r\n    right: 0;\r\n    left: 0;\r\n    bottom: 0;\r\n    width: 100%;\n}\n.rootWrapper:not(.safari) .columns-double .columnsArea {\r\n\t-moz-column-count: 2;\r\n    column-count: 2;\r\n    grid-column-gap: 0;\r\n    -moz-column-gap: 0;\r\n    column-gap: 0;\r\n    height: 100%;\r\n    padding: 0;\r\n    width: 100%;\n}\n@media only screen and (max-width: 1020px) {\n.rootWrapper:not(.safari) .columns-double .columnsArea {\r\n\t\t-moz-column-count: 1;\r\n    \tcolumn-count: 1\n}\n}\n.rootWrapper:not(.safari) .columns-single .columnsArea {\r\n\t-moz-column-count: 1;\r\n\t     column-count: 1;\r\n\t-moz-column-gap: 0;\r\n\t     column-gap: 0;\r\n\theight: 100%;\r\n    padding: 0;\r\n    width: 100%;\n}\n.rootWrapper:not(.safari) .columns-single .columnsArea #content-area {\r\n\t\tmax-width: 37em;\r\n\t\tmargin: 0 auto;\n}\n.nav-prev { left: 0px;\n}\n.nav-next { right: 0px;\n}\n.viewer-nav {\r\n\theight: 100%;\r\n\tposition: relative;\r\n\ttop: 0px;\r\n\tbottom: 0px;\r\n\tz-index: 10;\r\n\twidth: 2.5rem;\r\n\tflex-shrink: 0;\r\n\tcursor: pointer;\r\n\talign-self: center;\r\n\ttransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\r\n\ttransition-duration: 500ms;\r\n\ttransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.viewer-nav:focus,\r\n\t.viewer-nav:active {\r\n\t\tborder: none !important;\r\n\t\tbox-shadow: none !important;\r\n\t\toutline-color: transparent !important;\n}\n#content-area *::-moz-selection {\r\n\tcolor: var(--theme-primary-extralight, #690000);\r\n\tbackground: var(--theme-secondary, #ffa03c);\n}\n#content-area *::selection {\r\n\tcolor: var(--theme-primary-extralight, #690000);\r\n\tbackground: var(--theme-secondary, #ffa03c);\n}\n.viewer-nav-icon { opacity: 0;\n}\n@media (min-width: 768px) {\n.viewer-nav-icon { opacity: 0.8;\n}\n}\n@media only screen and (max-width: 600px) {\n.columnsArea {\r\n\t\ttransition: margin 100ms\n}\n}\n#asidebar {\r\n\tbackground: var(--sidebar-backgorund, #690000);\r\n\tcolor: var(--sidebar-text, #f3f4f6);\n}\r\n\r\n/* slider */\n.rootWrapper.safari .slider-target,\r\n.rootWrapper.safari .slider-target *{\r\n\tdisplay: none !important;\n}\n.slider-target,.slider-target *{\r\n    -webkit-touch-callout:none;\r\n    -webkit-tap-highlight-color:rgba(0,0,0,0);\r\n    box-sizing:border-box;\r\n    touch-action:none;\r\n    -webkit-user-select:none;\r\n    -moz-user-select:none;\r\n    user-select:none\n}\n.slider-target{\r\n    position:relative\n}\n.slider-base,.slider-connects{\r\n    height:100%;\r\n    position:relative;\r\n    width:100%;\r\n    z-index:1\n}\n.slider-connects{\r\n    overflow:hidden;\r\n    z-index:0\n}\n.slider-connect,.slider-origin{\r\n    height:100%;\r\n    position:absolute;\r\n    right:0;\r\n    top:0;\r\n    transform-origin:0 0;\r\n    transform-style:flat;\r\n    width:100%;\r\n    will-change:transform;\r\n    z-index:1\n}\n.slider-txt-dir-rtl.slider-horizontal .slider-origin{\r\n    left:0;\r\n    right:auto\n}\n.slider-vertical .slider-origin{\r\n    top:-100%;\r\n    width:0\n}\n.slider-horizontal .slider-origin{\r\n    height:0\n}\n.slider-handle{\r\n    backface-visibility:hidden;\r\n    position:absolute\n}\n.slider-touch-area{\r\n    height:100%;\r\n    width:100%\n}\n.slider-state-tap .slider-connect,.slider-state-tap .slider-origin{\r\n    transition:transform .3s\n}\n.slider-state-drag *{\r\n    cursor:inherit!important\n}\n.slider-tooltip-drag .slider-tooltip,.slider-tooltip-focus .slider-tooltip{\r\n    display:none!important\n}\n.slider-tooltip-drag .slider-active .slider-tooltip,.slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden),.slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden){\r\n    display:block!important\n}\n.slider-horizontal{\r\n    height:var(--slider-height,6px)\n}\n.slider-horizontal .slider-handle{\r\n    height:var(--slider-handle-height,16px);\r\n    right:calc(var(--slider-handle-width, 16px)/2*-1);\r\n    top:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);\r\n    width:var(--slider-handle-width,16px)\n}\n.slider-vertical{\r\n    height:var(--slider-vertical-height,300px);\r\n    width:var(--slider-height,6px)\n}\n.slider-vertical .slider-handle{\r\n    bottom:calc(var(--slider-handle-width, 16px)/2*-1);\r\n    height:var(--slider-handle-width,16px);\r\n    right:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);\r\n    width:var(--slider-handle-height,16px)\n}\n.slider-txt-dir-rtl.slider-horizontal .slider-handle{\r\n    left:calc(var(--slider-handle-width, 16px)/2*-1);\r\n    right:auto\n}\n.slider-base{\r\n    background-color:var(--slider-bg,#d1d5db)\n}\n.slider-base,.slider-connects{\r\n    border-radius:var(--slider-radius,9999px)\n}\n.slider-connect{\r\n    background:var(--theme-secondary, #690000);\r\n    cursor:pointer\n}\n.slider-draggable{\r\n    cursor:ew-resize\n}\n.slider-vertical .slider-draggable{\r\n    cursor:ns-resize\n}\n.slider-handle{\r\n    background:var(--slider-handle-bg,#fff);\r\n    border:var(--slider-handle-border,0);\r\n    border-radius:var(--slider-handle-radius,9999px);\r\n    box-shadow:var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));\r\n    cursor:grab;\r\n    height:var(--slider-handle-height,16px);\r\n    width:var(--slider-handle-width,16px)\n}\n.slider-handle:focus{\r\n    box-shadow:0 0 0 var(--slider-handle-ring-width,3px) var(--slider-handle-ring-color,rgba(16,185,129,.188)),var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));\r\n    outline:none\n}\n.slider-active{\r\n    box-shadow:var(--slider-handle-shadow-active,.5px .5px 2px 1px rgba(0,0,0,.42));\r\n    cursor:grabbing\n}\n[disabled] .slider-connect{\r\n    background:var(--slider-connect-bg-disabled,#9ca3af)\n}\n[disabled] .slider-handle,[disabled].slider-handle,[disabled].slider-target{\r\n    cursor:not-allowed\n}\n[disabled] .slider-tooltip{\r\n    background:var(--theme-secondary, #690000);\r\n    border-color:var(--theme-secondary, #690000);\r\n\topacity: 0.5;\n}\n.slider-tooltip{\r\n    background:var(--theme-secondary, #690000);\r\n    border:1px solid var(--theme-secondary, #690000);\r\n    border-radius:var(--slider-tooltip-radius,5px);\r\n    color:var(--slider-tooltip-color,#fff);\r\n    display:block;\r\n    font-size:var(--slider-tooltip-font-size,.875rem);\r\n    font-weight:var(--slider-tooltip-font-weight,600);\r\n    line-height:var(--slider-tooltip-line-height,1.25rem);\r\n    min-width:var(--slider-tooltip-min-width,20px);\r\n    padding:var(--slider-tooltip-py,2px) var(--slider-tooltip-px,6px);\r\n    position:absolute;\r\n    text-align:center;\r\n    white-space:nowrap\n}\n.slider-horizontal .slider-tooltip-top{\r\n    bottom:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\r\n    left:50%;\r\n    transform:translate(-50%)\n}\n.slider-horizontal .slider-tooltip-top:before{\r\n    border:var(--slider-tooltip-arrow-size,5px) solid transparent;\r\n    border-top-color:inherit;\r\n    bottom:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\r\n    content:\"\";\r\n    height:0;\r\n    left:50%;\r\n    position:absolute;\r\n    transform:translate(-50%);\r\n    width:0\n}\n.slider-horizontal .slider-tooltip-bottom{\r\n    left:50%;\r\n    top:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\r\n    transform:translate(-50%)\n}\n.slider-horizontal .slider-tooltip-bottom:before{\r\n    border:var(--slider-tooltip-arrow-size,5px) solid transparent;\r\n    border-bottom-color:inherit;\r\n    content:\"\";\r\n    height:0;\r\n    left:50%;\r\n    position:absolute;\r\n    top:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\r\n    transform:translate(-50%);\r\n    width:0\n}\n.slider-vertical .slider-tooltip-left{\r\n    right:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\r\n    top:50%;\r\n    transform:translateY(-50%)\n}\n.slider-vertical .slider-tooltip-left:before{\r\n    border:var(--slider-tooltip-arrow-size,5px) solid transparent;\r\n    border-left-color:inherit;\r\n    content:\"\";\r\n    height:0;\r\n    position:absolute;\r\n    right:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\r\n    top:50%;\r\n    transform:translateY(-50%);\r\n    width:0\n}\n.slider-vertical .slider-tooltip-right{\r\n    left:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\r\n    top:50%;\r\n    transform:translateY(-50%)\n}\n.slider-vertical .slider-tooltip-right:before{\r\n    border:var(--slider-tooltip-arrow-size,5px) solid transparent;\r\n    border-right-color:inherit;\r\n    content:\"\";\r\n    height:0;\r\n    left:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\r\n    position:absolute;\r\n    top:50%;\r\n    transform:translateY(-50%);\r\n    width:0\n}\n.slider-horizontal .slider-origin>.slider-tooltip{\r\n    left:auto;\r\n    transform:translate(50%)\n}\n.slider-horizontal .slider-origin>.slider-tooltip-top{\r\n    bottom:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + 1px)\n}\n.slider-horizontal .slider-origin>.slider-tooltip-bottom{\r\n    top:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px)\n}\n.slider-vertical .slider-origin>.slider-tooltip{\r\n    top:auto;\r\n    transform:translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px))*-1 + 1px))\n}\n.slider-vertical .slider-origin>.slider-tooltip-left{\r\n    right:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - 1px)\n}\n.slider-vertical .slider-origin>.slider-tooltip-right{\r\n    left:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px)\n}\r\n\r\n";
+const _style_0 = ".border-primary { border-color: var(--theme-primary, #690000);\n}\n.text-primary { color: var(--theme-primary, #690000);\n}\n.bg-primary { background-color: var(--theme-primary, #690000);\n}\n.border-primary-extralight { border-color: var(--theme-primary-extralight, #f3f4f6);\n}\n.text-primary-extralight { color: var(--theme-primary-extralight, #f3f4f6);\n}\n.bg-primary-extralight { background-color: var(--theme-primary-extralight, #f3f4f6);\n}\n.border-secondary { border-color: var(--theme-secondary, #ffa03c);\n}\n.text-secondary { color: var(--theme-secondary, #ffa03c);\n}\n.bg-secondary { background-color: var(--theme-secondary, #ffa03c);\n}\n.rootWrapper {\n\tmax-height: 100%;\n    height: 100%;\n}\nmain#rootComponent {\n\theight: 100%;\n\tmax-height: 100%;\n}\nmain#rootComponent.light {\n\t\tbackground-color: var(--bg-light-mode, #fff7e0)\n}\nmain#rootComponent.dark {\n\t\tbackground-color: var(--bg-dark-mode, #2d2d2d);\n}\nmain#rootComponent.dark #content-area {\n\t\t\tcolor: #fff\n}\nheader.wrapper {\n\twidth: 200px;\n\tmargin: 0 auto;\n}\n#engine {\n\theight: calc(100% - 8.4rem);\n\tposition: relative;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.rootWrapper.safari {\n\tmax-height: initial;\n\theight: initial;\n}\n.rootWrapper.safari #engine {\n\theight: auto !important;\n}\n#reader-component {\n\twidth: calc(100% - 5rem);\n}\n.typeArea {\n\twidth: 100%;\n}\n.engineWrapper {\n\theight: 100%;\n    display: flex;\n    justify-content: space-between;\n\tposition: relative;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    width: 100%;\n}\n.rootWrapper:not(.safari) .columns-double .columnsArea {\n\t-moz-column-count: 2;\n    column-count: 2;\n    grid-column-gap: 0;\n    -moz-column-gap: 0;\n    column-gap: 0;\n    height: 100%;\n    padding: 0;\n    width: 100%;\n}\n@media only screen and (max-width: 1020px) {\n.rootWrapper:not(.safari) .columns-double .columnsArea {\n\t\t-moz-column-count: 1;\n    \tcolumn-count: 1\n}\n}\n.rootWrapper:not(.safari) .columns-single .columnsArea {\n\t-moz-column-count: 1;\n\t     column-count: 1;\n\t-moz-column-gap: 0;\n\t     column-gap: 0;\n\theight: 100%;\n    padding: 0;\n    width: 100%;\n}\n.rootWrapper:not(.safari) .columns-single .columnsArea #content-area {\n\t\tmax-width: 37em;\n\t\tmargin: 0 auto;\n}\n.nav-prev { left: 0px;\n}\n.nav-next { right: 0px;\n}\n.viewer-nav {\n\theight: 100%;\n\tposition: relative;\n\ttop: 0px;\n\tbottom: 0px;\n\tz-index: 10;\n\twidth: 2.5rem;\n\tflex-shrink: 0;\n\tcursor: pointer;\n\talign-self: center;\n\ttransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n\ttransition-duration: 500ms;\n\ttransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.viewer-nav:focus,\n\t.viewer-nav:active {\n\t\tborder: none !important;\n\t\tbox-shadow: none !important;\n\t\toutline-color: transparent !important;\n}\n#content-area *::-moz-selection {\n\tcolor: var(--theme-primary-extralight, #690000);\n\tbackground: var(--theme-secondary, #ffa03c);\n}\n#content-area *::selection {\n\tcolor: var(--theme-primary-extralight, #690000);\n\tbackground: var(--theme-secondary, #ffa03c);\n}\n.viewer-nav-icon { opacity: 0;\n}\n@media (min-width: 768px) {\n.viewer-nav-icon { opacity: 0.8;\n}\n}\n@media only screen and (max-width: 600px) {\n.columnsArea {\n\t\ttransition: margin 100ms\n}\n}\n#asidebar {\n\tbackground: var(--sidebar-backgorund, #690000);\n\tcolor: var(--sidebar-text, #f3f4f6);\n}\n\n/* slider */\n.rootWrapper.safari .slider-target,\n.rootWrapper.safari .slider-target *{\n\tdisplay: none !important;\n}\n.slider-target,.slider-target *{\n    -webkit-touch-callout:none;\n    -webkit-tap-highlight-color:rgba(0,0,0,0);\n    box-sizing:border-box;\n    touch-action:none;\n    -webkit-user-select:none;\n    -moz-user-select:none;\n    user-select:none\n}\n.slider-target{\n    position:relative\n}\n.slider-base,.slider-connects{\n    height:100%;\n    position:relative;\n    width:100%;\n    z-index:1\n}\n.slider-connects{\n    overflow:hidden;\n    z-index:0\n}\n.slider-connect,.slider-origin{\n    height:100%;\n    position:absolute;\n    right:0;\n    top:0;\n    transform-origin:0 0;\n    transform-style:flat;\n    width:100%;\n    will-change:transform;\n    z-index:1\n}\n.slider-txt-dir-rtl.slider-horizontal .slider-origin{\n    left:0;\n    right:auto\n}\n.slider-vertical .slider-origin{\n    top:-100%;\n    width:0\n}\n.slider-horizontal .slider-origin{\n    height:0\n}\n.slider-handle{\n    backface-visibility:hidden;\n    position:absolute\n}\n.slider-touch-area{\n    height:100%;\n    width:100%\n}\n.slider-state-tap .slider-connect,.slider-state-tap .slider-origin{\n    transition:transform .3s\n}\n.slider-state-drag *{\n    cursor:inherit!important\n}\n.slider-tooltip-drag .slider-tooltip,.slider-tooltip-focus .slider-tooltip{\n    display:none!important\n}\n.slider-tooltip-drag .slider-active .slider-tooltip,.slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden),.slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden){\n    display:block!important\n}\n.slider-horizontal{\n    height:var(--slider-height,6px)\n}\n.slider-horizontal .slider-handle{\n    height:var(--slider-handle-height,16px);\n    right:calc(var(--slider-handle-width, 16px)/2*-1);\n    top:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);\n    width:var(--slider-handle-width,16px)\n}\n.slider-vertical{\n    height:var(--slider-vertical-height,300px);\n    width:var(--slider-height,6px)\n}\n.slider-vertical .slider-handle{\n    bottom:calc(var(--slider-handle-width, 16px)/2*-1);\n    height:var(--slider-handle-width,16px);\n    right:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);\n    width:var(--slider-handle-height,16px)\n}\n.slider-txt-dir-rtl.slider-horizontal .slider-handle{\n    left:calc(var(--slider-handle-width, 16px)/2*-1);\n    right:auto\n}\n.slider-base{\n    background-color:var(--slider-bg,#d1d5db)\n}\n.slider-base,.slider-connects{\n    border-radius:var(--slider-radius,9999px)\n}\n.slider-connect{\n    background:var(--theme-secondary, #690000);\n    cursor:pointer\n}\n.slider-draggable{\n    cursor:ew-resize\n}\n.slider-vertical .slider-draggable{\n    cursor:ns-resize\n}\n.slider-handle{\n    background:var(--slider-handle-bg,#fff);\n    border:var(--slider-handle-border,0);\n    border-radius:var(--slider-handle-radius,9999px);\n    box-shadow:var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));\n    cursor:grab;\n    height:var(--slider-handle-height,16px);\n    width:var(--slider-handle-width,16px)\n}\n.slider-handle:focus{\n    box-shadow:0 0 0 var(--slider-handle-ring-width,3px) var(--slider-handle-ring-color,rgba(16,185,129,.188)),var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));\n    outline:none\n}\n.slider-active{\n    box-shadow:var(--slider-handle-shadow-active,.5px .5px 2px 1px rgba(0,0,0,.42));\n    cursor:grabbing\n}\n[disabled] .slider-connect{\n    background:var(--slider-connect-bg-disabled,#9ca3af)\n}\n[disabled] .slider-handle,[disabled].slider-handle,[disabled].slider-target{\n    cursor:not-allowed\n}\n[disabled] .slider-tooltip{\n    background:var(--theme-secondary, #690000);\n    border-color:var(--theme-secondary, #690000);\n\topacity: 0.5;\n}\n.slider-tooltip{\n    background:var(--theme-secondary, #690000);\n    border:1px solid var(--theme-secondary, #690000);\n    border-radius:var(--slider-tooltip-radius,5px);\n    color:var(--slider-tooltip-color,#fff);\n    display:block;\n    font-size:var(--slider-tooltip-font-size,.875rem);\n    font-weight:var(--slider-tooltip-font-weight,600);\n    line-height:var(--slider-tooltip-line-height,1.25rem);\n    min-width:var(--slider-tooltip-min-width,20px);\n    padding:var(--slider-tooltip-py,2px) var(--slider-tooltip-px,6px);\n    position:absolute;\n    text-align:center;\n    white-space:nowrap\n}\n.slider-horizontal .slider-tooltip-top{\n    bottom:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n    left:50%;\n    transform:translate(-50%)\n}\n.slider-horizontal .slider-tooltip-top:before{\n    border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n    border-top-color:inherit;\n    bottom:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n    content:\"\";\n    height:0;\n    left:50%;\n    position:absolute;\n    transform:translate(-50%);\n    width:0\n}\n.slider-horizontal .slider-tooltip-bottom{\n    left:50%;\n    top:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n    transform:translate(-50%)\n}\n.slider-horizontal .slider-tooltip-bottom:before{\n    border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n    border-bottom-color:inherit;\n    content:\"\";\n    height:0;\n    left:50%;\n    position:absolute;\n    top:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n    transform:translate(-50%);\n    width:0\n}\n.slider-vertical .slider-tooltip-left{\n    right:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n    top:50%;\n    transform:translateY(-50%)\n}\n.slider-vertical .slider-tooltip-left:before{\n    border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n    border-left-color:inherit;\n    content:\"\";\n    height:0;\n    position:absolute;\n    right:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n    top:50%;\n    transform:translateY(-50%);\n    width:0\n}\n.slider-vertical .slider-tooltip-right{\n    left:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n    top:50%;\n    transform:translateY(-50%)\n}\n.slider-vertical .slider-tooltip-right:before{\n    border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n    border-right-color:inherit;\n    content:\"\";\n    height:0;\n    left:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n    position:absolute;\n    top:50%;\n    transform:translateY(-50%);\n    width:0\n}\n.slider-horizontal .slider-origin>.slider-tooltip{\n    left:auto;\n    transform:translate(50%)\n}\n.slider-horizontal .slider-origin>.slider-tooltip-top{\n    bottom:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + 1px)\n}\n.slider-horizontal .slider-origin>.slider-tooltip-bottom{\n    top:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px)\n}\n.slider-vertical .slider-origin>.slider-tooltip{\n    top:auto;\n    transform:translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px))*-1 + 1px))\n}\n.slider-vertical .slider-origin>.slider-tooltip-left{\n    right:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - 1px)\n}\n.slider-vertical .slider-origin>.slider-tooltip-right{\n    left:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px)\n}\n\n";
 
 const _style_1 = "/* In your Vue component's <style> section */\n:host {\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n::slotted(*) {\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n}\n\n/* Ensure paragraphs can be selected across boundaries */\n::slotted(p) {\n  -webkit-user-select: text;\n     -moz-user-select: text;\n          user-select: text;\n  display: block;\n  /* Avoid inline-block which can break selection */\n}";
 

package/package.json

@@ -4,7 +4,7 @@
 	"description": "A flipping page web component for reading long texts on the brower",
 	"main": "dist/index.es.js",
 	"module": "dist/index.es.js",
-	"version": "0.3.3",
+	"version": "0.3.4",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/educkf/paginar.git"

package/src/assets/main.css

@@ -1,392 +1,392 @@
-.border-primary { border-color: var(--theme-primary, #690000); }
-.text-primary { color: var(--theme-primary, #690000); }
-.bg-primary { background-color: var(--theme-primary, #690000); }
-
-.border-primary-extralight { border-color: var(--theme-primary-extralight, #f3f4f6); }
-.text-primary-extralight { color: var(--theme-primary-extralight, #f3f4f6); }
-.bg-primary-extralight { background-color: var(--theme-primary-extralight, #f3f4f6); }
-
-.border-secondary { border-color: var(--theme-secondary, #ffa03c); }
-.text-secondary { color: var(--theme-secondary, #ffa03c); }
-.bg-secondary { background-color: var(--theme-secondary, #ffa03c); }
-
-.rootWrapper {
-	max-height: 100%;
-    height: 100%;
-}
-
-main#rootComponent {
-	height: 100%;
-	max-height: 100%;
-
-	&.light {
-		background-color: var(--bg-light-mode, #fff7e0)
-	}
-
-	&.dark {
-		background-color: var(--bg-dark-mode, #2d2d2d);
-
-		#content-area {
-			color: #fff
-		}
-	}
-}
-
-header.wrapper {
-	width: 200px;
-	margin: 0 auto;
-}
-
-#engine {
-	height: calc(100% - 8.4rem);
-	position: relative;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-}
-
-.rootWrapper.safari {
-	max-height: initial;
-	height: initial;
-}
-
-.rootWrapper.safari #engine {
-	height: auto !important;
-}
-
-#reader-component {
-	width: 100%;
-}
-
-.typeArea {
-	width: 100%;
-}
-
-.engineWrapper {
-	height: 100%;
-    display: flex;
-    justify-content: space-between;
-	position: relative;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-}
-
-.rootWrapper:not(.safari) .columns-double .columnsArea {
-	-moz-column-count: 2;
-    column-count: 2;
-    grid-column-gap: 0;
-    -moz-column-gap: 0;
-    column-gap: 0;
-    height: 100%;
-    padding: 0;
-    width: 100%;
-
-	@media only screen and (max-width: 1020px) {
-		-moz-column-count: 1;
-    	column-count: 1;
-	}
-}
-
-.rootWrapper:not(.safari) .columns-single .columnsArea {
-	column-count: 1;
-	column-gap: 0;
-	height: 100%;
-    padding: 0;
-    width: 100%;
-
-	#content-area {
-		max-width: 37em;
-		margin: 0 auto;
-	}
-}
-
-
-.nav-prev {
-	@apply left-0;
-}
-
-.nav-next {
-	@apply right-0;
-}
-
-.viewer-nav {
-	height: 100%;
-
-	@apply relative z-10 inset-y-0 transition duration-500 ease-in-out self-center w-10 cursor-pointer flex-shrink-0;
-
-
-	&:focus,
-	&:active {
-		border: none !important;
-		box-shadow: none !important;
-		outline-color: transparent !important;
-	}
-}
-
-#content-area *::selection {
-	color: var(--theme-primary-extralight, #690000);
-	background: var(--theme-secondary, #ffa03c);
-}
-
-.viewer-nav-icon {
-	@apply opacity-0 md:opacity-80;
-}
-
-.columnsArea {
-	@media only screen and (max-width: 600px) {
-		transition: margin 100ms;
-	}
-}
-
-#asidebar {
-	background: var(--sidebar-backgorund, #690000);
-	color: var(--sidebar-text, #f3f4f6);
-}
-
-/* slider */
-
-.rootWrapper.safari .slider-target,
-.rootWrapper.safari .slider-target *{
-	display: none !important;
-}
-
-.slider-target,.slider-target *{
-    -webkit-touch-callout:none;
-    -webkit-tap-highlight-color:rgba(0,0,0,0);
-    box-sizing:border-box;
-    touch-action:none;
-    -webkit-user-select:none;
-    -moz-user-select:none;
-    user-select:none
-}
-.slider-target{
-    position:relative
-}
-.slider-base,.slider-connects{
-    height:100%;
-    position:relative;
-    width:100%;
-    z-index:1
-}
-.slider-connects{
-    overflow:hidden;
-    z-index:0
-}
-.slider-connect,.slider-origin{
-    height:100%;
-    position:absolute;
-    right:0;
-    top:0;
-    -ms-transform-origin:0 0;
-    -webkit-transform-origin:0 0;
-    transform-origin:0 0;
-    -webkit-transform-style:preserve-3d;
-    transform-style:flat;
-    width:100%;
-    will-change:transform;
-    z-index:1
-}
-.slider-txt-dir-rtl.slider-horizontal .slider-origin{
-    left:0;
-    right:auto
-}
-.slider-vertical .slider-origin{
-    top:-100%;
-    width:0
-}
-.slider-horizontal .slider-origin{
-    height:0
-}
-.slider-handle{
-    -webkit-backface-visibility:hidden;
-    backface-visibility:hidden;
-    position:absolute
-}
-.slider-touch-area{
-    height:100%;
-    width:100%
-}
-.slider-state-tap .slider-connect,.slider-state-tap .slider-origin{
-    transition:transform .3s
-}
-.slider-state-drag *{
-    cursor:inherit!important
-}
-.slider-tooltip-drag .slider-tooltip,.slider-tooltip-focus .slider-tooltip{
-    display:none!important
-}
-.slider-tooltip-drag .slider-active .slider-tooltip,.slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden),.slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden){
-    display:block!important
-}
-.slider-horizontal{
-    height:var(--slider-height,6px)
-}
-.slider-horizontal .slider-handle{
-    height:var(--slider-handle-height,16px);
-    right:calc(var(--slider-handle-width, 16px)/2*-1);
-    top:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);
-    width:var(--slider-handle-width,16px)
-}
-.slider-vertical{
-    height:var(--slider-vertical-height,300px);
-    width:var(--slider-height,6px)
-}
-.slider-vertical .slider-handle{
-    bottom:calc(var(--slider-handle-width, 16px)/2*-1);
-    height:var(--slider-handle-width,16px);
-    right:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);
-    width:var(--slider-handle-height,16px)
-}
-.slider-txt-dir-rtl.slider-horizontal .slider-handle{
-    left:calc(var(--slider-handle-width, 16px)/2*-1);
-    right:auto
-}
-.slider-base{
-    background-color:var(--slider-bg,#d1d5db)
-}
-.slider-base,.slider-connects{
-    border-radius:var(--slider-radius,9999px)
-}
-.slider-connect{
-    background:var(--theme-secondary, #690000);
-    cursor:pointer
-}
-.slider-draggable{
-    cursor:ew-resize
-}
-.slider-vertical .slider-draggable{
-    cursor:ns-resize
-}
-.slider-handle{
-    background:var(--slider-handle-bg,#fff);
-    border:var(--slider-handle-border,0);
-    border-radius:var(--slider-handle-radius,9999px);
-    box-shadow:var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));
-    cursor:-webkit-grab;
-    cursor:grab;
-    height:var(--slider-handle-height,16px);
-    width:var(--slider-handle-width,16px)
-}
-.slider-handle:focus{
-    box-shadow:0 0 0 var(--slider-handle-ring-width,3px) var(--slider-handle-ring-color,rgba(16,185,129,.188)),var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));
-    outline:none
-}
-.slider-active{
-    box-shadow:var(--slider-handle-shadow-active,.5px .5px 2px 1px rgba(0,0,0,.42));
-    cursor:-webkit-grabbing;
-    cursor:grabbing
-}
-[disabled] .slider-connect{
-    background:var(--slider-connect-bg-disabled,#9ca3af)
-}
-[disabled] .slider-handle,[disabled].slider-handle,[disabled].slider-target{
-    cursor:not-allowed
-}
-[disabled] .slider-tooltip{
-    background:var(--theme-secondary, #690000);
-    border-color:var(--theme-secondary, #690000);
-	opacity: 0.5;
-}
-.slider-tooltip{
-    background:var(--theme-secondary, #690000);
-    border:1px solid var(--theme-secondary, #690000);
-    border-radius:var(--slider-tooltip-radius,5px);
-    color:var(--slider-tooltip-color,#fff);
-    display:block;
-    font-size:var(--slider-tooltip-font-size,.875rem);
-    font-weight:var(--slider-tooltip-font-weight,600);
-    line-height:var(--slider-tooltip-line-height,1.25rem);
-    min-width:var(--slider-tooltip-min-width,20px);
-    padding:var(--slider-tooltip-py,2px) var(--slider-tooltip-px,6px);
-    position:absolute;
-    text-align:center;
-    white-space:nowrap
-}
-.slider-horizontal .slider-tooltip-top{
-    bottom:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
-    left:50%;
-    transform:translate(-50%)
-}
-.slider-horizontal .slider-tooltip-top:before{
-    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
-    border-top-color:inherit;
-    bottom:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
-    content:"";
-    height:0;
-    left:50%;
-    position:absolute;
-    transform:translate(-50%);
-    width:0
-}
-.slider-horizontal .slider-tooltip-bottom{
-    left:50%;
-    top:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
-    transform:translate(-50%)
-}
-.slider-horizontal .slider-tooltip-bottom:before{
-    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
-    border-bottom-color:inherit;
-    content:"";
-    height:0;
-    left:50%;
-    position:absolute;
-    top:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
-    transform:translate(-50%);
-    width:0
-}
-.slider-vertical .slider-tooltip-left{
-    right:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
-    top:50%;
-    transform:translateY(-50%)
-}
-.slider-vertical .slider-tooltip-left:before{
-    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
-    border-left-color:inherit;
-    content:"";
-    height:0;
-    position:absolute;
-    right:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
-    top:50%;
-    transform:translateY(-50%);
-    width:0
-}
-.slider-vertical .slider-tooltip-right{
-    left:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
-    top:50%;
-    transform:translateY(-50%)
-}
-.slider-vertical .slider-tooltip-right:before{
-    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
-    border-right-color:inherit;
-    content:"";
-    height:0;
-    left:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
-    position:absolute;
-    top:50%;
-    transform:translateY(-50%);
-    width:0
-}
-.slider-horizontal .slider-origin>.slider-tooltip{
-    left:auto;
-    transform:translate(50%)
-}
-.slider-horizontal .slider-origin>.slider-tooltip-top{
-    bottom:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + 1px)
-}
-.slider-horizontal .slider-origin>.slider-tooltip-bottom{
-    top:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px)
-}
-.slider-vertical .slider-origin>.slider-tooltip{
-    top:auto;
-    transform:translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px))*-1 + 1px))
-}
-.slider-vertical .slider-origin>.slider-tooltip-left{
-    right:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - 1px)
-}
-.slider-vertical .slider-origin>.slider-tooltip-right{
-    left:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px)
-}
-
+.border-primary { border-color: var(--theme-primary, #690000); }
+.text-primary { color: var(--theme-primary, #690000); }
+.bg-primary { background-color: var(--theme-primary, #690000); }
+
+.border-primary-extralight { border-color: var(--theme-primary-extralight, #f3f4f6); }
+.text-primary-extralight { color: var(--theme-primary-extralight, #f3f4f6); }
+.bg-primary-extralight { background-color: var(--theme-primary-extralight, #f3f4f6); }
+
+.border-secondary { border-color: var(--theme-secondary, #ffa03c); }
+.text-secondary { color: var(--theme-secondary, #ffa03c); }
+.bg-secondary { background-color: var(--theme-secondary, #ffa03c); }
+
+.rootWrapper {
+	max-height: 100%;
+    height: 100%;
+}
+
+main#rootComponent {
+	height: 100%;
+	max-height: 100%;
+
+	&.light {
+		background-color: var(--bg-light-mode, #fff7e0)
+	}
+
+	&.dark {
+		background-color: var(--bg-dark-mode, #2d2d2d);
+
+		#content-area {
+			color: #fff
+		}
+	}
+}
+
+header.wrapper {
+	width: 200px;
+	margin: 0 auto;
+}
+
+#engine {
+	height: calc(100% - 8.4rem);
+	position: relative;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.rootWrapper.safari {
+	max-height: initial;
+	height: initial;
+}
+
+.rootWrapper.safari #engine {
+	height: auto !important;
+}
+
+#reader-component {
+	width: calc(100% - 5rem);
+}
+
+.typeArea {
+	width: 100%;
+}
+
+.engineWrapper {
+	height: 100%;
+    display: flex;
+    justify-content: space-between;
+	position: relative;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+}
+
+.rootWrapper:not(.safari) .columns-double .columnsArea {
+	-moz-column-count: 2;
+    column-count: 2;
+    grid-column-gap: 0;
+    -moz-column-gap: 0;
+    column-gap: 0;
+    height: 100%;
+    padding: 0;
+    width: 100%;
+
+	@media only screen and (max-width: 1020px) {
+		-moz-column-count: 1;
+    	column-count: 1;
+	}
+}
+
+.rootWrapper:not(.safari) .columns-single .columnsArea {
+	column-count: 1;
+	column-gap: 0;
+	height: 100%;
+    padding: 0;
+    width: 100%;
+
+	#content-area {
+		max-width: 37em;
+		margin: 0 auto;
+	}
+}
+
+
+.nav-prev {
+	@apply left-0;
+}
+
+.nav-next {
+	@apply right-0;
+}
+
+.viewer-nav {
+	height: 100%;
+
+	@apply relative z-10 inset-y-0 transition duration-500 ease-in-out self-center w-10 cursor-pointer flex-shrink-0;
+
+
+	&:focus,
+	&:active {
+		border: none !important;
+		box-shadow: none !important;
+		outline-color: transparent !important;
+	}
+}
+
+#content-area *::selection {
+	color: var(--theme-primary-extralight, #690000);
+	background: var(--theme-secondary, #ffa03c);
+}
+
+.viewer-nav-icon {
+	@apply opacity-0 md:opacity-80;
+}
+
+.columnsArea {
+	@media only screen and (max-width: 600px) {
+		transition: margin 100ms;
+	}
+}
+
+#asidebar {
+	background: var(--sidebar-backgorund, #690000);
+	color: var(--sidebar-text, #f3f4f6);
+}
+
+/* slider */
+
+.rootWrapper.safari .slider-target,
+.rootWrapper.safari .slider-target *{
+	display: none !important;
+}
+
+.slider-target,.slider-target *{
+    -webkit-touch-callout:none;
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
+    box-sizing:border-box;
+    touch-action:none;
+    -webkit-user-select:none;
+    -moz-user-select:none;
+    user-select:none
+}
+.slider-target{
+    position:relative
+}
+.slider-base,.slider-connects{
+    height:100%;
+    position:relative;
+    width:100%;
+    z-index:1
+}
+.slider-connects{
+    overflow:hidden;
+    z-index:0
+}
+.slider-connect,.slider-origin{
+    height:100%;
+    position:absolute;
+    right:0;
+    top:0;
+    -ms-transform-origin:0 0;
+    -webkit-transform-origin:0 0;
+    transform-origin:0 0;
+    -webkit-transform-style:preserve-3d;
+    transform-style:flat;
+    width:100%;
+    will-change:transform;
+    z-index:1
+}
+.slider-txt-dir-rtl.slider-horizontal .slider-origin{
+    left:0;
+    right:auto
+}
+.slider-vertical .slider-origin{
+    top:-100%;
+    width:0
+}
+.slider-horizontal .slider-origin{
+    height:0
+}
+.slider-handle{
+    -webkit-backface-visibility:hidden;
+    backface-visibility:hidden;
+    position:absolute
+}
+.slider-touch-area{
+    height:100%;
+    width:100%
+}
+.slider-state-tap .slider-connect,.slider-state-tap .slider-origin{
+    transition:transform .3s
+}
+.slider-state-drag *{
+    cursor:inherit!important
+}
+.slider-tooltip-drag .slider-tooltip,.slider-tooltip-focus .slider-tooltip{
+    display:none!important
+}
+.slider-tooltip-drag .slider-active .slider-tooltip,.slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden),.slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden){
+    display:block!important
+}
+.slider-horizontal{
+    height:var(--slider-height,6px)
+}
+.slider-horizontal .slider-handle{
+    height:var(--slider-handle-height,16px);
+    right:calc(var(--slider-handle-width, 16px)/2*-1);
+    top:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);
+    width:var(--slider-handle-width,16px)
+}
+.slider-vertical{
+    height:var(--slider-vertical-height,300px);
+    width:var(--slider-height,6px)
+}
+.slider-vertical .slider-handle{
+    bottom:calc(var(--slider-handle-width, 16px)/2*-1);
+    height:var(--slider-handle-width,16px);
+    right:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);
+    width:var(--slider-handle-height,16px)
+}
+.slider-txt-dir-rtl.slider-horizontal .slider-handle{
+    left:calc(var(--slider-handle-width, 16px)/2*-1);
+    right:auto
+}
+.slider-base{
+    background-color:var(--slider-bg,#d1d5db)
+}
+.slider-base,.slider-connects{
+    border-radius:var(--slider-radius,9999px)
+}
+.slider-connect{
+    background:var(--theme-secondary, #690000);
+    cursor:pointer
+}
+.slider-draggable{
+    cursor:ew-resize
+}
+.slider-vertical .slider-draggable{
+    cursor:ns-resize
+}
+.slider-handle{
+    background:var(--slider-handle-bg,#fff);
+    border:var(--slider-handle-border,0);
+    border-radius:var(--slider-handle-radius,9999px);
+    box-shadow:var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));
+    cursor:-webkit-grab;
+    cursor:grab;
+    height:var(--slider-handle-height,16px);
+    width:var(--slider-handle-width,16px)
+}
+.slider-handle:focus{
+    box-shadow:0 0 0 var(--slider-handle-ring-width,3px) var(--slider-handle-ring-color,rgba(16,185,129,.188)),var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));
+    outline:none
+}
+.slider-active{
+    box-shadow:var(--slider-handle-shadow-active,.5px .5px 2px 1px rgba(0,0,0,.42));
+    cursor:-webkit-grabbing;
+    cursor:grabbing
+}
+[disabled] .slider-connect{
+    background:var(--slider-connect-bg-disabled,#9ca3af)
+}
+[disabled] .slider-handle,[disabled].slider-handle,[disabled].slider-target{
+    cursor:not-allowed
+}
+[disabled] .slider-tooltip{
+    background:var(--theme-secondary, #690000);
+    border-color:var(--theme-secondary, #690000);
+	opacity: 0.5;
+}
+.slider-tooltip{
+    background:var(--theme-secondary, #690000);
+    border:1px solid var(--theme-secondary, #690000);
+    border-radius:var(--slider-tooltip-radius,5px);
+    color:var(--slider-tooltip-color,#fff);
+    display:block;
+    font-size:var(--slider-tooltip-font-size,.875rem);
+    font-weight:var(--slider-tooltip-font-weight,600);
+    line-height:var(--slider-tooltip-line-height,1.25rem);
+    min-width:var(--slider-tooltip-min-width,20px);
+    padding:var(--slider-tooltip-py,2px) var(--slider-tooltip-px,6px);
+    position:absolute;
+    text-align:center;
+    white-space:nowrap
+}
+.slider-horizontal .slider-tooltip-top{
+    bottom:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
+    left:50%;
+    transform:translate(-50%)
+}
+.slider-horizontal .slider-tooltip-top:before{
+    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
+    border-top-color:inherit;
+    bottom:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
+    content:"";
+    height:0;
+    left:50%;
+    position:absolute;
+    transform:translate(-50%);
+    width:0
+}
+.slider-horizontal .slider-tooltip-bottom{
+    left:50%;
+    top:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
+    transform:translate(-50%)
+}
+.slider-horizontal .slider-tooltip-bottom:before{
+    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
+    border-bottom-color:inherit;
+    content:"";
+    height:0;
+    left:50%;
+    position:absolute;
+    top:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
+    transform:translate(-50%);
+    width:0
+}
+.slider-vertical .slider-tooltip-left{
+    right:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
+    top:50%;
+    transform:translateY(-50%)
+}
+.slider-vertical .slider-tooltip-left:before{
+    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
+    border-left-color:inherit;
+    content:"";
+    height:0;
+    position:absolute;
+    right:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
+    top:50%;
+    transform:translateY(-50%);
+    width:0
+}
+.slider-vertical .slider-tooltip-right{
+    left:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));
+    top:50%;
+    transform:translateY(-50%)
+}
+.slider-vertical .slider-tooltip-right:before{
+    border:var(--slider-tooltip-arrow-size,5px) solid transparent;
+    border-right-color:inherit;
+    content:"";
+    height:0;
+    left:calc(var(--slider-tooltip-arrow-size, 5px)*-2);
+    position:absolute;
+    top:50%;
+    transform:translateY(-50%);
+    width:0
+}
+.slider-horizontal .slider-origin>.slider-tooltip{
+    left:auto;
+    transform:translate(50%)
+}
+.slider-horizontal .slider-origin>.slider-tooltip-top{
+    bottom:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + 1px)
+}
+.slider-horizontal .slider-origin>.slider-tooltip-bottom{
+    top:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px)
+}
+.slider-vertical .slider-origin>.slider-tooltip{
+    top:auto;
+    transform:translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px))*-1 + 1px))
+}
+.slider-vertical .slider-origin>.slider-tooltip-left{
+    right:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - 1px)
+}
+.slider-vertical .slider-origin>.slider-tooltip-right{
+    left:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px)
+}
+