@import "_variables";

.gallery-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow: hidden;
  flex-grow: 1;
  max-height: 379.5px;
  max-width: 533px;
  pointer-events: all;

  .still-image {
    width: 100%;
    align-self: center;
  }
}

.attachments {
  margin-top: 0.35em;
  display: flex;
  flex-direction: row;
  width: 100%;
  max-height: 600px;
  border-radius: 7px;
  overflow: hidden;
  flex-flow: column;
  background-color: var(--bg_color);
  align-items: center;
  pointer-events: all;

  .image-attachment {
    width: 100%;
  }
}

.attachment {
  position: relative;
  line-height: 0;
  overflow: hidden;
  margin: 0 0.25em 0 0;
  flex-grow: 1;
  box-sizing: border-box;
  min-width: 2em;

  &:last-child {
    margin: 0;
    max-height: 530px;
  }
}

.gallery-gif video {
  max-height: 530px;
  background-color: #101010;
}

.still-image {
  max-height: 379.5px;
  max-width: 533px;

  img {
    object-fit: cover;
    max-width: 100%;
    max-height: 379.5px;
    flex-basis: 300px;
    flex-grow: 1;
  }
}

.alt-text {
  margin: 0px;
  padding: 11px 7px;
  box-sizing: border-box;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 2.98em;
  max-height: 25px;
  white-space: pre;
  overflow: hidden;
  border-radius: 10px;
  color: var(--fg_color);
  font-size: 12px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.alt-text:hover {
  padding: 7px;
  width: Min(230px, calc(100% - 10px * 2));
  max-height: calc(100% - 10px);
  line-height: 1.2em;
  white-space: pre-wrap;
  transition-duration: 0.4s;
  transition-property: max-height;
}

.image {
  display: flex;
}

// .single-image {
//     display: inline-block;
//     width: 100%;
//     max-height: 600px;

//     .attachments {
//         width: unset;
//         max-height: unset;
//         display: inherit;
//     }
// }

.overlay-circle {
  border-radius: 50%;
  background-color: var(--dark_grey);
  width: 40px;
  height: 40px;
  align-items: center;
  display: flex;
  border-width: 5px;
  border-color: var(--play_button);
  border-style: solid;
}

.overlay-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 17px;
  border-color: transparent transparent transparent var(--play_button);
  margin-left: 14px;
}

.media-gif {
  display: table;
  background-color: unset;
  width: unset;
}

.media-body {
  flex: 1;
  padding: 0;
  white-space: pre-wrap;
}