.flexiglass-img-wrap {
position: relative;
width: 100%!important;
height: auto;
cursor: pointer;
}
.flexiglass-img-top-image {
z-index: 5;
opacity: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: auto;
transition: opacity 0.6s ease;
object-fit: inherit;
object-position: inherit;
aspect-ratio: inherit;
} .switched .flexiglass-img-top-image {
opacity: 0;
}
.flexiglass-img-bottom-image {
z-index: 1;
position: relative;
top: 0;
left: 0;
width: 100%;
max-width: 100%;
height: auto;
object-fit: inherit;
object-position: inherit;
aspect-ratio: inherit;
} .flexiglass-img-switcher {
--flexiglass-switcher-height: 41px;
--flexiglass-switcher-toggle-size: 35px;
}
.flexiglass-img-switcher {
z-index: 10;
position: absolute;
top: 20px;
left: calc(50% - var(--flexiglass-switcher-height));
border: 1px solid white;
border-radius: 200px;
display: flex;
cursor: pointer;
height: var(--flexiglass-switcher-height); background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.flexiglass-img-content {
position: relative;
display: flex;
align-items: center;
justify-content: space-evenly;
width: calc(2 * var(--flexiglass-switcher-height));
}
.flexiglass-img-on,
.flexiglass-img-off {
width: var(--flexiglass-switcher-toggle-size);
height: var(--flexiglass-switcher-toggle-size);
line-height: var(--flexiglass-switcher-toggle-size);
text-align: center;
vertical-align: middle;
color: white;
font-style: uppercase;
font-size: 1rem;
}
.flexiglass-img-arrow {
width: var(--flexiglass-switcher-toggle-size);
height: var(--flexiglass-switcher-toggle-size);
border-radius: 50px;
text-align: center;
position: absolute;
top: 2px;
left: 2px;
background-color: #ffffff;
transform: translateX(0) translateY(0);
transition: all 300ms linear;
}
.switched .flexiglass-img-arrow {
top: 2px;
transform: translateX(calc(1.23 * var(--flexiglass-switcher-toggle-size))) translateY(0);
}
.flexiglass-img-arrow span {
font-size: 20px;
line-height: var(--flexiglass-switcher-toggle-size);
transform: rotatez(0);
display: inline-block;
transition: all 300ms linear;
transition: all 200ms linear 150ms;
color: black !important;
}
.switched .flexiglass-img-arrow span {
transform: rotatez(180deg);
}