/**
 * Attachment containers are either:
 *  - <div> elements, in the message thread;
 *  - <iframe> elements, in the Compose area (draft attachments).
 * Both containers have an `attachment-container' class, but only <iframe>
 * containers have an `attachment-draft' class.
 */
.attachment-container {
  position: relative;
  margin-bottom: 0.5rem;

  display: block;
  border: none;
  height: 10rem;
  width: 10rem;

  -moz-user-select: none;
}

.attachment-draft {
  margin: 0;
  padding: 0;

  font-family: sans-serif;
}

/* make sure all pointer events are sent to the main container */
.attachment-draft *,
.attachment-container * {
  pointer-events: none;
}

.attachment-container.nopreview { /* 100x100 px placeholder + filename below */
  height: 12.7rem; /* font-size = 1.7rem + 1rem margin */
}

/* Internal height of the iframe that contains the attachment draft */
.attachment-container.nopreview[data-attachment-type="vcard"] {
  /* 40x40 px placeholder + filename below */
  height: 6.7rem; /* font-size = 1.7rem + 1rem margin */
}

/* The internal height of the attachment itself */
.attachment[data-attachment-type="vcard"] {
  height: 100%;
}

/* Allow to display the filename properly */
#messages-input > [data-attachment-type="vcard"] {
  width: 20rem;
}

.article-list[data-type="list"] .message .attachment-container {
  margin: 1rem 0;
}

/**
 * Attachments that occur at the bounds of an MMS message do not need
 * additional spacing.
 */
#messages-container[data-type="list"] .message .attachment-container:first-child {
  margin-top: 0;
}
#messages-container[data-type="list"] .message .attachment-container:last-child {
  margin-bottom: 0;
}

.attachment {
  position: absolute;
  top: 0;
  offset-inline-start: 0;

  width: 10rem;
  height: 10rem;
}

.outgoing .attachment {
  offset-inline-start: auto;
  offset-inline-end: 0;
}

.preview .attachment {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  background-color: #ececec;
  border: 2px solid #fff;
}

.preview .attachment:active,
.preview .attachment:hover {
  background-color: #b2f2ff;
}

.size-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;

  padding: 0 0.4rem;
  display: none;

  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 1.5rem;
}

.attachment-draft > :not([data-attachment-type="vcard"]) .size-indicator {
  display: block;
}

.file-name {
  position: absolute;
  bottom: 0.5rem;

  height: 2rem;
  display: none;

  line-height: 2rem;
  font-size: 1.6rem;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .file-name has a dir="auto". Moreover, sms.css in not included in attachment
 * iframe, so we cannot leverage the general alignment rules. */
html[dir="ltr"] .file-name {
  text-align: left;
  left: 1px; /* Avoid issues related to being too much on the left */
  right: 0;
}
html[dir="rtl"] .file-name {
  text-align: right;
  left: 0;
  right: 1px;
}

.attachment-draft .file-name {
  color: #4a4a4a;
}

.nopreview .file-name {
  display: block;

  unicode-bidi: -moz-plaintext;
}

.thumbnail {
  width: 100%;
  height: 100%;

  background: none no-repeat center center / cover;
}

.thumbnail-placeholder {
  width: 100%;
  height: 100%;

  /* BiDi-proof: CSS sprites */
  background: image-set(url("images/attachments.png") 1x, url("images/attachments@1.5x.png") 1.5x, url("images/attachments@2x.png") 2x, url("images/attachments@2.25x.png") 2.25x) no-repeat left top / 10rem;
}

.attachment-container .thumbnail,
.attachment-container .thumbnail-placeholder {
  position: absolute;
  top: 0
}

.attachment-draft:hover .thumbnail-placeholder:not(.vcard-placeholder),
.attachment-draft:active .thumbnail-placeholder:not(.vcard-placeholder),
.attachment-container:not([data-attachment-type="vcard"]):hover .thumbnail-placeholder,
.attachment-container:not([data-attachment-type="vcard"]):active .thumbnail-placeholder {
  background-color: #33cccc;
  background-blend-mode: luminosity;
}

.img-placeholder {
  background-position: left -10rem; /* BiDi proof: CSS sprites */
}

.audio-placeholder {
  background-position: left -20rem; /* BiDi proof: CSS sprites */
}

.video-placeholder {
  background-position: left -30rem; /* BiDi proof: CSS sprites */
}

.vcard-placeholder {
  background: image-set(url("images/attachment-vcard.png") 1x, url("images/attachment-vcard@1.5x.png") 1.5x, url("images/attachment-vcard@2x.png") 2x, url("images/attachment-vcard@2.25x.png") 2.25x) no-repeat;
  background-size: 4rem;
}
html[dir="ltr"] .vcard-placeholder { background-position: left top; }
html[dir="rtl"] .vcard-placeholder { background-position: right top; }

.incoming.received .vcard-placeholder {
  background-image: image-set(url("images/attachment-vcard-incoming.png") 1x, url("images/attachment-vcard-incoming@1.5x.png") 1.5x, url("images/attachment-vcard-incoming@2x.png") 2x, url("images/attachment-vcard-incoming@2.25x.png") 2.25x);
}

.attachment.corrupted .thumbnail-placeholder:after {
  display: block;

  position: absolute;
  top: 0;
  offset-inline-start: 0;
  height: 100%;
  width: 100%;

  content: '';
  background: image-set(url("icons/corrupted.png") 1x, url("icons/corrupted@1.5x.png") 1.5x, url("icons/corrupted@2x.png") 2x, url("icons/corrupted@2.25x.png") 2.25x) no-repeat center center / 10rem;
}