:root { --zoomist-wrapper-bg-color: #efefef; --zoomist-slider-bg-color: rgba(255, 255, 255, .8); --zoomist-slider-border-radius: 0 0 4px 0; --zoomist-slider-padding-x: 20px; --zoomist-slider-padding-y: 20px; --zoomist-slider-track-color: #ddd; --zoomist-slider-track-color-hover: #ccc; --zoomist-slider-bar-size: 120px; --zoomist-slider-bar-side: 2px; --zoomist-slider-bar-border-radius: 2px; --zoomist-slider-bar-color: #666; --zoomist-slider-bar-color-hover: #444; --zoomist-slider-button-size: 12px; --zoomist-slider-button-color: #fff; --zoomist-zoomer-button-size: 48px; --zoomist-zoomer-button-color: rgba(255, 255, 255, .8); --zoomist-zoomer-button-color-hover: rgba(255, 255, 255, .9); --zoomist-zoomer-button-color-disabled: rgba(255, 255, 255, .8); --zoomist-zoomer-button-opacity-disabled: .7; --zoomist-zoomer-icon-size: 14px; --zoomist-zoomer-icon-color: #333; --zoomist-zoomer-icon-color-hover: #111; --zoomist-zoomer-icon-color-disabled: #999; --zoomist-modules-tranistion-duration: .3s }
.zoomist-container { position: relative; padding: 0 !important; -webkit-user-select: none; user-select: none }
.zoomist-wrapper { position: relative; z-index: 1; width: 100%; height: 100%; padding: 0 !important; overflow: hidden; background-color: var(--zoomist-wrapper-bg-color) }
.zoomist-image { position: relative; max-width: none !important; max-height: none !important }
.zoomist-slider { position: absolute; z-index: 2; top: 0; left: 0; padding: var(--zoomist-slider-padding-y) var(--zoomist-slider-padding-x); background-color: var(--zoomist-slider-bg-color); border-radius: var(--zoomist-slider-border-radius) }
.zoomist-slider:hover .zoomist-slider-wrapper { background-color: var(--zoomist-slider-track-color-hover) }
.zoomist-slider:hover .zoomist-slider-bar { background-color: var(--zoomist-slider-bar-color-hover) }
.zoomist-slider:hover .zoomist-slider-button:before { box-shadow: 0 0 8px #0009 }
.zoomist-slider-horizontal .zoomist-slider-wrapper { align-items: center; justify-content: flex-start; width: var(--zoomist-slider-bar-size); height: var(--zoomist-slider-bar-side) }
.zoomist-slider-horizontal .zoomist-slider-bar { top: 0; width: calc(var(--value) * 1%); height: 100% }
.zoomist-slider-horizontal .zoomist-slider-button { left: calc(var(--value) * 1%) }
.zoomist-slider-vertical .zoomist-slider-wrapper { align-items: flex-end; justify-content: center; width: var(--zoomist-slider-bar-side); height: var(--zoomist-slider-bar-size) }
.zoomist-slider-vertical .zoomist-slider-bar { bottom: 0; width: 100%; height: calc(var(--value) * 1%) }
.zoomist-slider-vertical .zoomist-slider-button { bottom: calc(var(--value) * 1%) }
.zoomist-slider-wrapper { position: relative; display: flex; background-color: var(--zoomist-slider-track-color); transition: background-color var(--zoomist-modules-tranistion-duration) }
.zoomist-slider-bar { position: absolute; z-index: 0; left: 0; display: block; border-radius: var(--zoomist-slider-bar-border-radius); background-color: var(--zoomist-slider-bar-color); transition: background-color var(--zoomist-modules-tranistion-duration) }
.zoomist-slider-button { position: relative; z-index: 1; display: block; width: 0 !important; height: 0 !important }
.zoomist-slider-button:before { content: ""; position: absolute; left: calc(var(--zoomist-slider-button-size) * -.5); top: calc(var(--zoomist-slider-button-size) * -.5); width: var(--zoomist-slider-button-size); height: var(--zoomist-slider-button-size); display: block; background-color: var(--zoomist-slider-button-color, #fff); border-radius: 50%; box-shadow: 0 0 4px #0006; transition: box-shadow var(--zoomist-modules-tranistion-duration) }
.zoomist-zoomer { position: absolute; z-index: 2; top: 0; right: 0; border-radius: 0 0 0 4px; overflow: hidden }
.zoomist-zoomer-button { position: relative; display: flex; justify-content: center; align-items: center; width: var(--zoomist-zoomer-button-size); height: var(--zoomist-zoomer-button-size); background: none; background-color: var(--zoomist-zoomer-button-color); border: 0; transition: background-color var(--zoomist-modules-tranistion-duration); cursor: pointer }
.zoomist-zoomer-button:hover { background-color: var(--zoomist-zoomer-button-color-hover) }
.zoomist-zoomer-button:hover .zoomist-zoomer-icon { fill: var(--zoomist-zoomer-icon-color-hover) }
.zoomist-zoomer-button.zoomist-zoomer-disabled { pointer-events: none; background-color: var(--zoomist-zoomer-button-color-disabled); opacity: var(--zoomist-zoomer-button-opacity-disabled) }
.zoomist-zoomer-button.zoomist-zoomer-disabled .zoomist-zoomer-icon { fill: var(--zoomist-zoomer-icon-color-disabled) }
.zoomist-zoomer-icon { width: var(--zoomist-zoomer-icon-size); height: var(--zoomist-zoomer-icon-size); fill: var(--zoomist-zoomer-icon-color); transition: fill var(--zoomist-modules-tranistion-duration) }