/**
 * @file
 * External links css file.
 */

span.ext {
  width: 10px;
  height: 10px;
  padding-right: 12px;
  text-decoration: none;
  background: url('../images/extlink_s.png') 2px center no-repeat;
}

span.mailto {
  width: 10px;
  height: 10px;
  padding-right: 12px;
  text-decoration: none;
  background: url('../images/extlink_s.png') -20px center no-repeat;
}

span.tel {
  width: 10px;
  height: 10px;
  padding-right: 12px;
  text-decoration: none;
  background: url('../images/extlink_s.png') -42px center no-repeat;
}

svg.ext {
  width: 14px;
  height: 14px;
  fill: #727272;
  font-weight: 900;
}

svg.mailto,
svg.tel {
  width: 14px;
  height: 14px;
  fill: #727272;
}

[data-extlink-placement='prepend'],
[data-extlink-placement='before'] {
  padding-right: 0.2rem;
}

[data-extlink-placement='append'],
[data-extlink-placement='after'] {
  padding-left: 0.2rem;
}

svg.ext path,
svg.mailto path,
svg.tel path {
  stroke: #727272;
  stroke-width: 3;
}

/* Hide the extra icons when printing. */
@media print {
  svg.ext,
  svg.mailto,
  svg.tel,
  span.ext,
  span.mailto,
  span.tel {
    display: none;
    padding: 0;
  }
}

/* Put some whitespace between the link and its Font Awesome suffix. */
.extlink i {
  padding-left: 0.2em;
}

.extlink-nobreak {
  white-space: nowrap;
}