/* fudji sans 1.1.2 — fonte e setas para o blog. */
@font-face {
  font-family: 'fudji sans';
  src: url('./fonts/FudjiSans-Regular.woff2?v=1.1.2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.hn-note {
  margin: 0;
  font-family: 'fudji sans', cursive;
  font-size: var(--hn-size, 40px);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--hn-ink, #282a25);
  overflow-wrap: anywhere;
}

.hn-annotation {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
  color: var(--hn-ink, #282a25);
}

/* A máscara permite que a seta acompanhe a cor da anotação. */
.hn-arrow {
  display: inline-block;
  flex-shrink: 0;
  width: 38px;
  height: 29px;
  color: var(--hn-ink, #282a25);
  background-color: currentColor;
  -webkit-mask: var(--hn-arrow-image) center / 100% 100% no-repeat;
  mask: var(--hn-arrow-image) center / 100% 100% no-repeat;
  vertical-align: middle;
}
.hn-arrow-down-left { --hn-arrow-image: url('./marks/arrow-down-left.svg?v=1.1.2'); }
.hn-arrow-down-right { --hn-arrow-image: url('./marks/arrow-down-right.svg?v=1.1.2'); }
.hn-arrow-up-left { --hn-arrow-image: url('./marks/arrow-up-left.svg?v=1.1.2'); }
.hn-arrow-up-right { --hn-arrow-image: url('./marks/arrow-up-right.svg?v=1.1.2'); }
.hn-arrow-curve-down { --hn-arrow-image: url('./marks/arrow-curve-down.svg?v=1.1.2'); }
.hn-arrow-curve-up { --hn-arrow-image: url('./marks/arrow-curve-up.svg?v=1.1.2'); }
.hn-arrow-right {
  --hn-arrow-image: url('./marks/arrow-right.svg?v=1.1.2');
  width: 29px;
  height: 14px;
}
.hn-arrow-left {
  --hn-arrow-image: url('./marks/arrow-left.svg?v=1.1.2');
  width: 29px;
  height: 14px;
}
.hn-arrow-up {
  --hn-arrow-image: url('./marks/arrow-up.svg?v=1.1.2');
  width: 14px;
  height: 24px;
}
.hn-arrow-down {
  --hn-arrow-image: url('./marks/arrow-down.svg?v=1.1.2');
  width: 14px;
  height: 24px;
}
.hn-arrow-both {
  --hn-arrow-image: url('./marks/arrow-both.svg?v=1.1.2');
  width: 38px;
  height: 12px;
}

/* Mesmas dimensões aprovadas para a seta da nota e a conexão do esquema. */
@media (max-width: 900px) {
  .hn-arrow-down-left { width: 25px; height: 19px; }
  .hn-arrow-right, .hn-arrow-left { width: 19px; height: 11px; }
}
@media (max-width: 600px) {
  .hn-arrow-right, .hn-arrow-left { width: 17px; height: 10px; }
}