/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

    This file contains rules for the
    IMAGE VIEWER MODULE
    that implement the UU design system specifically for Sitevision

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* Slideshow and lightbox */

.sv-marketplace-sitevision-image-viewer button:not(:has(img)),
.env-image-viewer-2__lightbox :is(button, a) {
    background-color: var(--color-button) !important;
    border-color: var(--color-button) !important;
    color: var(--color-button-text) !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    min-width: 2.75rem !important;
    padding: calc(2em - 2px) 0 0 !important;
    width: 2.75rem !important;
}

.sv-marketplace-sitevision-image-viewer button:not(:has(img)):hover,
.env-image-viewer-2__lightbox :is(button, a):hover {
    background-color: var(--color-button-hover) !important;
    border-color: var(--color-button-hover) !important;
    color: var(--color-button-text-hover) !important;
}

.sv-marketplace-sitevision-image-viewer button:not(:has(img)) svg,
.env-image-viewer-2__lightbox :is(button, a) svg {
    fill: var(--color-button-text) !important;
    filter: invert(1);
    height: 1.1rem !important;
    margin: -.55em 0 0 -.55em !important;
    width: 1.1rem !important;
}

.env-image-viewer-2__lightbox :is(button, a) {
    padding: calc(2.75em - 2px) 0 0 !important;
}

.env-image-viewer-2__lightbox figcaption {
    color: white !important;
}

/* Thumbnails */

.sv-marketplace-sitevision-image-viewer button:has(img):hover {
    border: none;
    display: block;
}

/* Overlay should not be used so neutralise the styles to make it look like the default viewer */

.env-image-viewer-2.env-image-viewer-2--overlay {
    display: flex;
    flex-direction: column;
}

.env-image-viewer-2.env-image-viewer-2--overlay > .env-image-viewer-2__viewer__controls {
    inset: auto;
    margin: 0 0 .5rem;
    order: -1;
    padding: 0;
    position: static;
    width: 100%;
    z-index: auto;
}

.env-image-viewer-2.env-image-viewer-2--overlay > .env-image-viewer-2__viewer {
    width: 100%;
}

.env-image-viewer-2.env-image-viewer-2--overlay .env-image-viewer-2__viewer__caption {
    background-color: transparent;
    color: inherit;
    inset: auto;
    margin: var(--env-text-caption-01-margin-block-start) 0 0;
    padding: 0;
    position: static;
    z-index: auto;
}