@use "fortawesome-fontawesome/mixins" as fa;

.message .embed {
  overflow: hidden;

  &,
  img,
  video {
    max-width: 100%;
    max-height: 40vh;
  }

  &.le-paste {
    max-height: 8.8em;
  }
}

.embed.le-details {
  background: var(--syntax-hl-base-bg);
  color: var(--syntax-hl-base);
  font-size: 0.9rem;
  line-height: 1.4em;
  border: var(--hr-border);
  padding: 0.3rem var(--gutter-small);
  overflow-x: auto;
  display: none;
}

.message.is-expanded .embed.le-details {
  display: block;
}

.embed iframe {
  max-width: 90vw;
  max-height: (0.7494553377 * 90vw); // 344 / 459 = 0.7494553377
}

.le-photo img {
  cursor: zoom-in;
}

.le-rich,
.le-photo {
  overflow: hidden;
  display: block;
  max-width: 100%; // required to contain iframes on iphone
  max-height: 50vh;
  margin: 6px 0;
}

.le-card,
.le-rich {
  .le-thumbnail-placeholder {
    display: none;
  }

  .le-thumbnail {
    float: left;

    img {
      max-height: 60px;
      margin-right: 8px;
      border: 0;
      box-shadow: none;
      vertical-align: bottom;
    }
  }

  h3 {
    font-size: 1em;
    line-height: 1em;
    display: block;
    margin: 0;
  }

  p {
    font-size: 0.9em;
    line-height: 1.2em;
    margin: 4px 0;
    display: table-cell;
  }
}

.le-card.le-provider-convosapp:not(.le-join-request) {
  h3,
  p {
    display: none;
  }

  .le-thumbnail img {
    max-height: 40vh;
    max-width: 100%;
  }
}

.le-card.le-join-request {
  i.fas {
    font-size: 2rem;
    margin-right: 8px;
    vertical-align: bottom;
  }
}

.le-paste .le-provider-link:before {
  content: "Hosted by ";
}

.le-video video {
  background: var(--body-bg);
  border: var(--hr-border);
  display: block;
  height: auto;
}

.le-goto-link {
  display: none;
}

.le-paste {
  font-size: 0.9rem;
  border: var(--hr-border);
  max-width: 100%;

  &.without-frame {
    &, .hljs {
      background: transparent;
      border: 0;
      padding: 0;
    }

    &:after {
      content: '' !important;
    }
  }

  .hljs {
    margin: 0;
  }

  .hljs-ln-numbers {
    padding: 0 0.3em;
  }

  .le-meta {
    background: var(--syntax-hl-base-bg);
    color: var(--text-color);
    padding: 0.3em;
    margin: 0;
    position: relative;

    .fa-angle-down {
      font-size: 1.2em;
      position: absolute;
      top: 0.4em;
      right: 0.4em;
      transition: transform 0.25s;
    }
  }

  ol {
    margin: 0.2rem 0;
  }
}

.message.is-expanded .le-paste {
  max-height: none;
  overflow-x: auto;

  .le-meta .fa-angle-down {
    transform: rotate(180deg);
  }
}
