/*
 * Buttons.
 *
 *   <a class="yb-button" href="/kontakt/">Võta ühendust</a>
 *       blue pill with the round arrow badge beside it (the site's main button)
 *   <a class="yb-button yb-button--plain" href="…">Saada</a>
 *       blue pill, no arrow
 *   <a class="yb-button yb-button--light" href="…">Teenused</a>
 *       white pill with blue text, for blue or photo backgrounds
 *   <a class="yb-button yb-button--outline" href="…">Meist</a>
 *       pale pill with a thin border
 *   <div class="yb-buttons">…</div>
 *       a row of buttons
 *
 * The arrow badge is drawn with ::before (circle) and ::after (arrow) and
 * hangs outside the pill, so the pill's width is the text's width.
 */
.yb-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 50px; /* room for the arrow badge */
  padding: 16px 24px;
  border: 0;
  border-radius: var(--yb-radius-pill);
  background: var(--yb-color-primary);
  color: var(--yb-color-white);
  font-family: var(--yb-font-body);
  font-size: var(--yb-size-button);
  font-weight: var(--yb-weight-medium);
  line-height: 1;
  letter-spacing: var(--yb-tracking-button);
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.yb-button:hover,
.yb-button:focus-visible {
  background: var(--yb-color-primary-hover);
  color: var(--yb-color-white);
}

.yb-button::before,
.yb-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(100% + 2px);
  width: 47px;
  height: 100%;
}

.yb-button::before {
  border-radius: 50%;
  background: inherit;
}

.yb-button::after {
  background: var(--yb-color-accent);
  -webkit-mask: url("../../icons/arrow-up-right.svg") center / 18px no-repeat;
  mask: url("../../icons/arrow-up-right.svg") center / 18px no-repeat;
  transition: transform 0.2s;
}

.yb-button:hover::after {
  transform: rotate(45deg);
}

/* --mail: the badge shows an envelope instead of the arrow. */
.yb-button--mail::after {
  -webkit-mask-image: url("../../icons/mail.svg");
  mask-image: url("../../icons/mail.svg");
}

.yb-button--mail:hover::after {
  transform: none;
}

.yb-button--plain,
.yb-button--light,
.yb-button--outline {
  margin-right: 0;
}

.yb-button--plain::before,
.yb-button--plain::after,
.yb-button--light::before,
.yb-button--light::after,
.yb-button--outline::before,
.yb-button--outline::after {
  content: none;
}

.yb-button--light {
  background: var(--yb-color-white);
  color: var(--yb-color-primary);
}

.yb-button--light:hover,
.yb-button--light:focus-visible {
  background: var(--yb-color-accent);
  color: var(--yb-color-primary);
}

.yb-button--outline {
  border: 1px solid var(--yb-color-border);
  background: var(--yb-color-surface);
  color: var(--yb-color-primary);
}

.yb-button--outline:hover,
.yb-button--outline:focus-visible {
  background: var(--yb-color-primary);
  color: var(--yb-color-white);
}

.yb-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--yb-space-xs);
}