/* Hide/show scrollbar */
body.compensate-for-scrollbar {
    overflow: hidden !important;
    touch-action: none;
}

.lightgallery-enabled a {
    cursor: zoom-in;
}

/* Main */
.lg-outer .lg-img-wrap {
    padding-bottom: 48px;
}
.lg-outer .lg-item:not(.lg-start-end-progress) {
    background: transparent;
}
.lg-backdrop {
    background: var(--bg-color);
}

/* Icons */
.lg-toolbar .lg-icon {
    height: 48px;
    width: 48px;
}
.lg-icon {
    font-family: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lg-icon:before,
.lg-icon:after {
    content: "";
    display: none;
}
.lg-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--buttons-color);
}

.lg-close svg {
    stroke-width: 3.2;
}

/* Nav */
.lg-prev,
.lg-next {
    transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.25s cubic-bezier(0, 0, 0.25, 1) 0s, stroke .2s ease, background .2s ease;
    border-radius: 0;
    background: var(--buttons-bg-color);
    padding: 8px 10px;
    width: 48px;
    height: 48px;
}
.lg-prev:hover:not(.disabled),
.lg-next:hover:not(.disabled) {
    background: var(--buttons-bg-color-on-hover);
}
.lg-prev svg,
.lg-next svg {
    stroke-width: 1;
    height: 24px;
}

/* Spinner */
.lg-container .lg-loader-circular {
    animation: lg-loader-rotate 1s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50px;
    height: 50px;
}

.lg-container .lg-loader-path {
    stroke: var(--buttons-color);
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: lg-loader-dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
    transition: stroke .2s;
    stroke-width: 4;
}

@keyframes lg-loader-rotate {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes lg-loader-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

/* Image */
.lg-outer.lg-grab img.lg-object {
    cursor: default;
}

/* Next on click */
.next-on-click .lg-next-slide .lg-image {
    cursor: pointer;
}

/* Caption */
.lg-sub-html {
    color: var(--buttons-color);
}