lightspeeddevelopment/lsx-customizer

.slick-lightbox-close {
    right: 32px;
    top: 47px;
}

.gallery,
.slick-lightbox-inner {
    .slick-arrow {
        background: transparent;
        border-radius: 50%;
        border-style: solid;
        border-width: 2px;
        font: 0/0 a;
        height: 4rem;
        margin-top: calc((2.25rem - 17px) / 2);
        padding: 0;
        position: absolute;
        text-shadow: none;
        top: 50%;
        transform: translateY(-50%);
        transition: border 300ms ease;
        width: 4rem;
        z-index: 3;

        &:before {
            display: block;
            font-family: 'FontAwesome';
            font-size: 3rem;
            line-height: 1;
            position: absolute;
            text-rendering: auto;
            top: 47%;
            transform: translateY(-50%);
            transition: color 300ms ease;

            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        &.slick-disabled { cursor: not-allowed; }

        &.slick-prev {
            &:before {
                content: '\f104';
                left: 1.1rem;
            }
        }

        &.slick-next {
            &:before {
                content: '\f105';
                left: 1.5rem;
            }
        }
    }
}

.gallery {
    .slick-dots:not(.dropdown-menu) {
        align-items: center;
        display: flex;
        flex-flow: row wrap;
        height: auto;
        justify-content: center;
        list-style: none;
        margin: 2rem 0 0;
        padding: 0;

        & > li {
            line-height: 1;
            padding: 5px;

            @include media('>=tablet') { padding: 0 7.5px; }

            & > button {
                background: transparent;
                border-style: solid;
                border-width: 1px;
                font: 0/0 a;
                height: 12px;
                transition: all 300ms ease-in-out;
                width: 4rem;

                @include media('>=tablet') { height: 6px; }
            }
        }
    }

    .slick-arrow {
        &.slick-prev { left: -4rem; }
        &.slick-next { right: -4rem; }
    }
}

.slick-lightbox-inner {
    .slick-arrow {
        opacity: .75;

        &:hover { opacity: 1; }
    }
}

.slick-lightbox-slick-caption { display: inline-block; }