.pswp__button--close,
.pswp--has_mouse .pswp__button--arrow{
width: 46px;
height: 46px;
border: 1px solid var(--color-text);
border-radius: 4px;
transition: var(--transition);
background-color: #fff;
}
.pswp__button:hover{
background-color: #fff;
}
.pswp--has_mouse .pswp__button--arrow--next{
right: 10px;
}
.pswp--has_mouse .pswp__button--arrow--prev{
left: 10px;
}
.pswp__button--close svg,
.pswp--has_mouse .pswp__button--arrow svg{
display: none;
}
.pswp__button--close:before,
.pswp--has_mouse .pswp__button--arrow:before{
content: '';
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/chevron-forward-outline.svg);
background-color: #333;
width: 24px;
height: 24px;
display: inline-block;
}
.pswp__button--close:before{
-webkit-mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/close-outline.svg);
mask-image: url(//babysteps.com.pl/wp-content/themes/web-theme/icons/close-outline.svg);
}
.pswp--has_mouse .pswp__button--arrow.pswp__button--arrow--prev:before{
transform:rotate(-180deg);
}
.pswp--has_mouse .pswp__button--arrow:hover{
background-color: #fff;
}
.pswp__icn{
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 40px;
height: 40px;
padding: 6px;
overflow: hidden;
pointer-events: none;
background-color: #fff;
border-radius: 50%;
fill: var(--color-heading);
}
.pswp__button--close{
margin-right: 10px;
margin-top: 10px;
}