.kk-zoomer {
	--kk-zoomer-bg: #fff;
	--kk-zoomer-fg: inherit;
	--kk-zoomer-animation-duration: 400ms;
	--kk-zoomer-transform-easing: cubic-bezier(0.2, 0, 0.2, 1);
	--kk-zoomer-btn-width: max(60px, 8vw);
	--kk-zoomer-btn-bg: transparent;
	--kk-zoomer-btn-fg: inherit;
	--kk-zoomer-btn-hover-bg: var(--gray-medium, #e8e8e8);
	--kk-zoomer-btn-hover-fg: inherit;
	--kk-zoomer-btn-icon-size: 26px;
	--kk-zoomer-btn-next-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTkuNzA3IDE4LjcwN2w2LTZjMC4zOTEtMC4zOTEgMC4zOTEtMS4wMjQgMC0xLjQxNGwtNi02Yy0wLjM5MS0wLjM5MS0xLjAyNC0wLjM5MS0xLjQxNCAwcy0wLjM5MSAxLjAyNCAwIDEuNDE0bDUuMjkzIDUuMjkzLTUuMjkzIDUuMjkzYy0wLjM5MSAwLjM5MS0wLjM5MSAxLjAyNCAwIDEuNDE0czEuMDI0IDAuMzkxIDEuNDE0IDB6Ii8+PC9zdmc+');
	--kk-zoomer-btn-prev-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE1LjcwNyAxNy4yOTNsLTUuMjkzLTUuMjkzIDUuMjkzLTUuMjkzYzAuMzkxLTAuMzkxIDAuMzkxLTEuMDI0IDAtMS40MTRzLTEuMDI0LTAuMzkxLTEuNDE0IDBsLTYgNmMtMC4zOTEgMC4zOTEtMC4zOTEgMS4wMjQgMCAxLjQxNGw2IDZjMC4zOTEgMC4zOTEgMS4wMjQgMC4zOTEgMS40MTQgMHMwLjM5MS0xLjAyNCAwLTEuNDE0eiIvPjwvc3ZnPg==');
	--kk-zoomer-drag-dist: 0;
	--kk-zoomer-prev-dist: 0;
	--kk-zoomer-next-dist: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999999;
	overflow: hidden;
	overscroll-behavior: contain;
	touch-action: none;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	color: var(--kk-zoomer-fg);
}

.kk-zoomer.active {
	--kk-zoomer-transform-easing: cubic-bezier(.26, 1.23, .61, 1);
}

.kk-zoomer .kk-zoomer-target {
	transition: transform var(--kk-zoomer-animation-duration) var(--kk-zoomer-transform-easing),
		width var(--kk-zoomer-animation-duration) var(--kk-zoomer-transform-easing),
		height var(--kk-zoomer-animation-duration) var(--kk-zoomer-transform-easing);
	touch-action: none;
	will-change: transform, width, height;
}

.kk-zoomer.no-animation {
	--kk-zoomer-animation-duration: 0.1ms;
}

.kk-zoomer .kk-zoomer-clone {
	transition: 
		border-width var(--kk-zoomer-animation-duration),
		border-radius var(--kk-zoomer-animation-duration) !important;
	width: 100% !important;
	height: 100% !important;
}

.kk-zoomer.active .kk-zoomer-clone {
	border-width: 0px !important;
	border-radius: 0px !important;
	box-shadow: none !important;
	outline-width: 0px !important;
}

.kk-zoomer .kk-zoomer-canvas {
	flex: 1;
}

.kk-zoomer .kk-zoomer-caption {
	padding: 0 1.5em 1.5em 1.5em;
	margin: 0;
	z-index: 0;
	position: relative;
	text-align: center;
	font-size: 0.9em;
	pointer-events: none;
	background: linear-gradient(to top, var(--kk-zoomer-bg) 60%, transparent);
	color: inherit;
	transform: translateY(calc(var(--kk-zoomer-drag-dist) * 100%));
	transition: 
		opacity calc(var(--kk-zoomer-animation-duration) / 2), 
		transform calc(var(--kk-zoomer-animation-duration) / 2);
	opacity: 0;
}

.kk-zoomer:not([data-zoomlevel="1"]) .kk-zoomer-caption {
	opacity: 0;
	transform: translateY(100%);
}

.kk-zoomer[data-zoomlevel="1"] .kk-zoomer-caption {
	opacity: calc(1 - var(--kk-zoomer-drag-dist) * 2);
}

.kk-zoomer .kk-zoomer-dimmer {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	background: var(--kk-zoomer-bg);
	visibility: hidden;
	transition:
		opacity var(--kk-zoomer-animation-duration),
		width 0ms var(--kk-zoomer-animation-duration),
		height 0ms var(--kk-zoomer-animation-duration),
		visibility 0ms var(--kk-zoomer-animation-duration);
	cursor: zoom-out;
	will-change: opacity;
}

.kk-zoomer.active .kk-zoomer-dimmer {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--kk-zoomer-animation-duration);
}

.kk-zoomer.active[data-zoomlevel="1"] .kk-zoomer-dimmer {
	opacity: calc(1 - var(--kk-zoomer-drag-dist));
}

.kk-zoomer-nav-btn {
	--kk-zoomer-control-btn-gradient-dir: 90deg;
	--kk-zoomer-control-btn-computed-bg: var(--kk-zoomer-btn-bg);
	position: absolute;
	width: var(--kk-zoomer-btn-width);
	height: 100%;
	top: 50%;
	transform: translateY(-50%);
	background: linear-gradient(var(--kk-zoomer-control-btn-gradient-dir), var(--kk-zoomer-control-btn-computed-bg), transparent);
	color: var(--kk-zoomer-btn-fg);
	transition: opacity 150ms ease-in-out, color 150ms, background 150ms;
	display: block;
	pointer-events: all;
	cursor: pointer;
	z-index: 1;
	opacity: calc(1 - var(--kk-zoomer-drag-dist));
}

.kk-zoomer-nav-btn:hover {
	--kk-zoomer-control-btn-computed-bg: var(--kk-zoomer-btn-hover-bg);
	color: var(--kk-zoomer-btn-hover-fg);
}

.kk-zoomer-nav-btn:after {
	content: "";
	-webkit-mask-size: var(--kk-zoomer-btn-icon-size);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	mask-size: var(--kk-zoomer-btn-icon-size);
	mask-repeat: no-repeat;
	mask-position: center center;
	background: currentColor;
	position: absolute;
	width: 100%;
	height: 100%;
	transition: opacity 200ms;
}

.kk-zoomer-prev {
	left: 0;
}

.kk-zoomer-prev:after {
	-webkit-mask-image: var(--kk-zoomer-btn-prev-icon);
	mask-image: var(--kk-zoomer-btn-prev-icon);
}

.kk-zoomer-next {
	--kk-zoomer-control-btn-gradient-dir: 270deg;
	right: 0;
}

.kk-zoomer-next:after {
	-webkit-mask-image: var(--kk-zoomer-btn-next-icon);
	mask-image: var(--kk-zoomer-btn-next-icon);
}

.kk-zoomer:not([data-zoomlevel="1"]) .kk-zoomer-nav-btn {
	opacity: 0;
	pointer-events: none;
}

.kk-zoomer-loading {
	cursor: wait !important;
	animation: kk-zoomer-loader 1s infinite linear;
}

@keyframes kk-zoomer-loader {
	0% {
		filter: opacity(100%);
	}
	50% {
		filter: opacity(50%);
	}
	100% {
		filter: opacity(100%);
	}
}