/**
 * @file
 * Styles for the FileField Mail "download" button.
 *
 * The markup produced by templates/filefield-mail-link.html.twig is:
 *   <span class="download-file"><a href="...">…</a></span>
 * The selector therefore targets the <a> nested in that span.
 */

span.download-file a {
  display: inline-block;
  margin-top: -5px;
  margin-bottom: 0.2rem;
  padding: 0.5rem 1rem;
  border: 1px solid #ffffff;
  border-radius: 0.375rem;
  background-color: #df382c;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.3333333;
  text-align: center;
  text-decoration: none;
}

span.download-file a:hover {
  border: 1px solid #d4d4d4;
  background-color: #bc271c;
  color: #ffffff;
  text-decoration: none;
}

span.download-file a::before {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.3rem;
  vertical-align: middle;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%25" height="100%25" fill="white" class="bi" viewBox="0 0 16 16"><path d="M14.031,8.016 L14.031,12.016 L2,12.016 L2,8.016 L0,8.016 L0,15 L15.938,15 L15.938,8.016 L14.031,8.016 Z" class="si-glyph-fill"/><path d="M8.072,8.947 L10.982,5.071 L8.968,5.05 L8.968,0.065 L7.03,0.065 L7.03,5.05 L5.03,5.05 L8.072,8.947 Z" class="si-glyph-fill"/></svg>');
  background-repeat: no-repeat;
  background-size: contain;
}

/* Variante "sticky" sur les pages de type trek (mobile en premier). */
.node--type-trek #sticky span.download-file a {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.15rem 0.25rem;
  font-size: 1rem;
  font-weight: bold;
}

@media screen and (min-width: 576px) {
  .node--type-trek #sticky span.download-file a {
    padding: 0.3rem 0.5rem;
    font-size: 1.2rem;
  }

  span.download-file a::before {
    width: 1rem;
    height: 1rem;
  }
}