/* stylelint-disable */

// default theme
.lg-actions {
    .lg-next, .lg-prev {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: $zindex-controls;
        background-color: $lg-next-prev-bg;
        color: $lg-next-prev-color;
        border-radius: $lg-border-radius-base;

        &.disabled {
            pointer-events: none;
            opacity: 0.5;
        }

        &:hover {
            color: $lg-next-prev-hover-color;
        }
    }

    .lg-next {
        right: $lg-next-prev-desktop-side-offset;
        font-size: $lg-action-icon-font-size;
    }

    .lg-prev {
        left: $lg-next-prev-desktop-side-offset;
        font-size: $lg-action-icon-font-size;
    }
}

@include mappy-bp(max md) {
    .lg-actions {
        .lg-next {
            right: 0;
        }

        .lg-prev {
            left: 0;
        }
    }
}

@keyframes lg-right-end {
    0% {
        left: 0;
    }

    50% {
        left: -30px;
    }

    100% {
        left: 0;
    }
}

@keyframes lg-left-end {
    0% {
        left: 0;
    }

    50% {
        left: 30px;
    }

    100% {
        left: 0;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}


.lg-outer {
    &.lg-right-end {
        .lg-object {
            animation: lg-right-end 0.3s;
            position: relative;
        }
    }

    &.lg-left-end {
        .lg-object {
            animation: lg-left-end 0.3s;
            position: relative;
        }
    }
}

// lg toolbar
.lg-toolbar {
    z-index: $zindex-toolbar;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: $lg-toolbar-bg;

    .lg-icon {
        float: right;
        color: $lg-toolbar-icon-color;
        cursor: pointer;
        font-size: $lg-action-icon-font-size;
        width: $lg-action-button-size;
        height: $lg-action-button-size;
        text-decoration: none !important;
        outline: medium none;
        transition: color 0.2s linear;

        &:hover {
            color: $lg-toolbar-icon-hover-color;
        }
    }
}

// lightGallery title
.lg-sub-html {
    background-color: $lg-caption-bg;
    bottom: 0;
    color: $lg-caption-color;
    font-size: 16px;
    left: 0;
    padding: 10px 40px;
    position: fixed;
    right: 0;
    text-align: center;
    z-index: $zindex-subhtml;

    h4 {
        margin: 0;
        font-size: 13px;
        font-weight: bold;
    }

    p {
        font-size: $lg-caption-font-size;
        margin: 5px 0 0;
    }
}

// lg image counter
#lg-counter {
    color: $lg-icon-color;
    display: inline-block;
    font-size: $lg-counter-font-size;
    padding-left: 1rem;
    padding-top: 1rem;
    vertical-align: middle;
}

// for idle state
.lg-toolbar, .lg-prev, .lg-next {
    opacity: 1;
    transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear;
}

.lg-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.lg-icon .c-icon {
    top: 0;
}

.lg-prev, .lg-next {
    width: $lg-action-button-size;
    height: $lg-action-button-size;
    border: $lg-next-prev-border;
}

.lg-hide-items {
    .lg-prev,
    .lg-next,
    .lg-toolbar {
        opacity: 0;
    }
}

// Starting effect
body:not(.lg-from-hash){
    .lg-outer {
        &.lg-start-zoom{
            .lg-object {
                transform: scale3d(0.5, 0.5, 0.5);
                opacity: 0;
                transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important;
                transform-origin: 50% 50%;
            }
            .lg-item.lg-complete{
                .lg-object{
                    transform: scale3d(1, 1, 1);
                    opacity: 1;
                }
            }
        }
    }
}
