/*————————————————–

Fancybox

—————————————————-*/

.u-fancybox-theme .fancybox-button {

@include px-to-rem(font-size, 20px);
@include px-to-rem(line-height, 41px);
@include px-to-rem(width, 44px);
@include px-to-rem(height, 44px);
text-align: center;
display: inline-block;
background-color: transparent;
@include px-to-rem(border-width, 1px);
border-style: solid;
border-color: $g-color-white;
outline: none;
border-radius: 50%;
opacity: .8;
transition: opacity .3s ease;

&::before {
        font-family: "hs-icons";
        position: static;
        opacity: 1;
        background-color: transparent;
        border: none;
        box-shadow: none;
        transform: none;
        width: auto;
        height: auto;
}

&--left,
&--right {
        @include px-to-rem(margin-top, -22px);
        position: absolute;
        top: 50%;
        z-index: 99994;
        display: none;
}

&--left {
        @include px-to-rem(left, 20px);
        &::before {
                content: "\e901";
        }
}

&--right {
        @include px-to-rem(right, 20px);
        &::before {
                content: "\e902";
        }
}

&--close {
        &::before {
                content: "\e904";
        }
}

&--play {
        &::before {
                content: "\e90c";
        }
}

&--fullscreen {
        &::before {
                content: "\e909";
        }
}

&--thumbs {
        &::before {
                content: "\e906";
        }
}

&::after {
        display: none;
}

&:hover,
&:focus {
        opacity: 1;
}

}

.u-fancybox-theme .fancybox-buttons {

@include px-to-rem(top, 20px);
@include px-to-rem(right, 20px);
@include px-to-rem(margin-left, -5px);
@include px-to-rem(margin-right, -5px);

.fancybox-button {
        @include px-to-rem(margin-left, 5px);
        @include px-to-rem(margin-right, 5px);
}

}

.u-fancybox-theme .fancybox-thumbs {

background-color: $g-color-black;

> ul > li {
        border-color: $g-color-black;

        &::before {
                border-color: $g-color-primary;
        }
}

}

/* Blur bg container */ .u-fancybox-blur-bg-container {

filter: blur(2px);

}

.fancybox-controls {

&--canzoomIn .fancybox-placeholder,
&--canzoomOut .fancybox-placeholder {
        cursor: inherit;
}

}