/* Custom Shortcodes */

.kb-image-comparison-slider {
	--slider-width: min(var(--width), var(--max-width));
	position: relative;
    width: var(--slider-width) !important;
    max-width: var(--slider-width) !important;
	height: auto !important;
	aspect-ratio: var(--aspect-ratio);
}
.kb-image-comparison-slider.align-middle {
	margin: 0 auto;
}
.kb-image-comparison-slider.align-right {
	margin-left: auto;
}

.kb-image-comparison {
	position: absolute;
    width: var(--slider-width);
    max-width: var(--slider-width);
    height: 100%;
	overflow: hidden;
}

.kb-image-comparison img {
    width: var(--slider-width);
    height: 100%;
    max-width: var(--slider-width);
    object-fit: cover;
}

.kb-image-comparison-handle {
	height: 100%;
    z-index: 9;
	width: 30px;
	position: absolute;
}

.kb-image-comparison-handle .grip {
    position: absolute;
	top: 50%;
	transform: translateY(-50%);
    cursor: ew-resize;
    width: 12px;
    height: 24px;
    border-radius: 5px;
    background-color: white;
    padding: 10px 21px 36px 10px;
	box-shadow: 0 3px 10px 0 #00000030;
	transition: opacity 200ms ease-in-out;
}
.kb-image-comparison-handle .grip:hover,
.kb-image-comparison-handle .grip:active {
	opacity: .5;
}

.kb-image-comparison-handle .grip::after {
    content: "⋮⋮";
    font-size: 22px;
    color: #959595;
    position: absolute;
    top: 8px;
    left: 9px;
}