/* Rich-text embedded attachments (images, video, files) inside comment bodies. */
@layer components {
  .attachment {
    margin-block: var(--block-space-half);

    img,
    video {
      max-inline-size: 100%;
      height: auto;
      border-radius: 0.5rem;
    }

    a {
      display: inline-block;
    }
  }

  .attachment--file {
    display: flex;
    gap: var(--inline-space-half);
    align-items: center;
    padding: var(--block-space-half) var(--inline-space);
    border: 1px solid var(--color-ink-lightest);
    border-radius: 0.5rem;
  }

  .attachment__caption {
    margin-block-start: calc(var(--block-space-half) / 2);
    color: var(--color-ink-light);
    font-size: var(--text-small);
  }

  .attachment__name {
    color: var(--color-ink-medium);
  }

  .attachment__link {
    color: var(--color-link);
  }

  .attachment__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.5rem;
    padding: var(--block-space-half);
    border-radius: 0.375rem;
    background-color: var(--color-ink-lightest);
    font-size: var(--text-small);
    text-transform: uppercase;
  }

  /* Square thumbnail preview for image/PDF attachments in the file list. */
  .attachment__preview {
    display: inline-flex;
    flex: 0 0 auto;

    img {
      block-size: 2.5rem;
      inline-size: 2.5rem;
      object-fit: cover;
      border-radius: 0.375rem;
    }
  }

  .attachment--file .attachment__name {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}