/*————————————————–
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; }
}