@use "./abstracts/mixins" as *;
@use "./abstracts/vars" as *;
@use "./base/fontawesome/font-awesome-mix-var" as *;
@use "./styles/galleria/no-margin" as *;

.on-page-editor {
    .gallery-inner img {
        max-width: 100%;
    }
}
.gallery {
    .galleria-container {
        background: $galleria-container-bg;
    }
    #galleria-loader {
        height: 1px!important;
    }
    .galleria-thumbnails .galleria-image img {
        border: none;
    }
    .galleria-counter {
        color: $gallery-counter-color;
        @include opensans-font-stack();
    }
    .galleria-loader {
        top: 50%;
        left: 50%;
    }
    .galleria-info-text {
        background-color: $gallery-info-bg;
        border: 1px solid $gallery-info-border;
    }
    .galleria-info-title {
        color: $gallery-info-text;
        font-size: 12px;
        font-weight: bold;
        @include opensans-font-stack();
    }
    .galleria-info-description {
        font-size: 12px;
        font-style: italic;
        @include opensans-font-stack();
        color: $gallery-info-text;
    }
    .galleria-info-close {
        width: 13px;
        height: 12px;
        &::before {
            content: $fa-var-close;
            @include fa-icon();
            display: block;
            width: 100%;
        }
    }
    .galleria-info-link {
        color: $gallery-nav;
        background: none;
        @include fa-icon();
        font-size: 18px;
        &::before {
            content: $fa-var-info-circle;
        }
    }
    .galleria-image-nav {
        margin-top: 0;
        transform: translateY(-50%);
        z-index: 999;
        height: 30px;
    }
    .galleria-image-nav-left, .galleria-image-nav-right {
        top: 50%;
        transform: translateY(-50%);
        height: 30px;
        width: 14px;
        @include fa-icon();
        font-size: 28px;
        color: $gallery-nav;
    }
    .galleria-image-nav-left {
        &::before {
            content: $fa-var-chevron-left;
        }
        &:hover {
            color: $gallery-nav-active;
        }
    }
    .galleria-image-nav-right {
        &::before {
            content: $fa-var-chevron-right;
        }
        &:hover {
            color: $gallery-nav-active;
        }
    }
    .galleria-thumb-nav-left, .galleria-thumb-nav-right {
        top: 15px;
        height: 7px;
        width: 5px;
    }
    .galleria-thumbnails {
        margin: 0 auto;
    }
    .galleria-thumb-nav-right {
        @include fa-icon();
        right: 10px;
        &::before {
            content: $fa-var-chevron-right;
            font-size: $font-normal;
            color: $gallery-nav;
            display: block;
        }
    }
    .galleria-thumb-nav-left {
        @include fa-icon();
        right: auto;
        left: 10px;
        &::before {
            content: $fa-var-chevron-left;
            font-size: $font-normal;
            color: $gallery-nav;
            display: block;
        }
    }
}