@import "common/foundation/variables";

$tiles-padding: 3px !default;

// Tiles Grid
//------------------------------------------
.tiles-initialized {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

.tiles-col {
min-width: calc(100% / 3);
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}

.tiles-col--3 {
display: none;
}

@media (min-width: 775px) {

.tiles-col--3 {
display: block;
}
}

.lightbox-wrapper,
> img {
display: block;
width: 100%;
height: auto;
box-sizing: border-box;
padding: $tiles-padding;
}

.lightbox {
position: relative;
display: flex;
align-items: center;
justify-content: center;

.tiles-zoom {
transition: opacity 0.5s ease-in-out;
opacity: 0;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
flex: 1;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
svg {
color: $primary-low;
 height: 1.5em;
width: 1.5em;
}
}

&:hover .tiles-zoom {
opacity: 1;
background: rgba(0, 0, 0, 0.75);
}

.meta {
display: none;
}
> img {
max-width: 100%;
width: 100%;
max-height: unset;
height: auto;
transition: all 1s ease;
z-index: 0;
position: absolute;
top: 0;
left: 0;
}
}

p:empty,
br,
> img {
display: none;
}
}

#reply-control div[data-theme-tiles="1"] > p {

border-left: 4px solid $tertiary;
padding-left: 2px;
margin-top: 2em;

> img:not(.thumbnail) {
width: auto;
max-height: 110px;
margin: 2px;
}
}

.bio-composer .TilesGallery {
display: none;
}