/* 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:active:not(.disabled),
.lg-next:active:not(.disabled) {
    background: var(--buttons-bg-color-on-active);
}
.lg-prev svg,
.lg-next svg {
    stroke-width: 1;
    height: 24px;
}

/* Spinner */
.lg-container .circular {
    width: 50px;
    height: 50px;
}
.lg-container .path {
    stroke: var(--buttons-color);
}

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

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