/* Facta button — port of the old theme .btn styles (native CSS). */

.btn,
button[type="submit"].btn {
  padding: 0.625rem 1.1rem !important;
  font-family: inherit;
  font-weight: 700 !important;
  display: inline-flex !important;
  gap: 0.5em;
  border-radius: 0.25rem !important;
  line-height: 1.5;
  font-size: 1rem;
  border: 0.0625rem solid;
  margin: 0 0 0.5rem;
  text-decoration: none;
  align-items: center;
  cursor: pointer;

  &:has(+ .btn) {
    margin-inline-end: 1rem;
  }
}

/* Salient slightly_rounded_shadow lifts submits with translateY(-3px). */
.btn:hover,
.btn:focus,
button[type="submit"].btn:hover,
button[type="submit"].btn:focus {
  transform: none !important;
}

/* Include button[type=submit] — Salient sets color:#fff on submits (beats .btn-*).
   Variants own color + border-color; never inherit from a light/dark column. */
.btn-primary,
button[type="submit"].btn-primary {
  background-color: var(--color-primary) !important;
  --start-color: var(--color-gradient-green-start);
  --end-color: var(--color-gradient-green-end);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.2s 0.1s;

  &::before {
    content: "";
    position: absolute;
    background-image: radial-gradient(circle, var(--start-color), var(--end-color));
    transition: 0.17s linear;
    width: 0;
    aspect-ratio: 1;
    inset: auto auto 0 0;
    border-radius: 50%;
    transform: translate(-50%, 50%);
    z-index: -1;
  }

  .stretched-link:hover > &,
  &:hover {
    border-color: var(--end-color);

    &::before {
      /* Twice the button width: circle is offset -50%. 2rem hides radius bleed. */
      width: calc(200% + 2rem);
    }
  }
}

/* Explicit + !important: Salient `body a` / `.span_12.light … a` keep white otherwise. */
.btn-primary:hover,
.btn-primary:focus-visible,
.stretched-link:hover > .btn-primary,
button[type="submit"].btn-primary:hover,
button[type="submit"].btn-primary:focus-visible {
  color: var(--color-primary) !important;
}

/* The gradient button carries a gradient of its own, so it does not share
   .btn-primary's reveal: no dark background, no growing circle. Figma component
   "Primair", State=Default (2133:32357) and State=Hover (2133:32356).

   Rest is Brand 2 → Brand 1. Hover is the same yellow/green/teal ramp, shifted
   so yellow sits off the left edge and teal off the right — the button itself
   stays lime → medium green. Stops do not interpolate, so the hover ramp is a
   second layer cross-faded on opacity rather than a change of stops.

   Neither Figma state has a border, but .btn gives every button one so the box
   stays the same size across variants. Hence a transparent border with the
   gradient run out to the border box, in both layers. */
.btn-gradient,
button[type="submit"].btn-gradient {
  color: var(--color-primary);
  border-color: transparent;
  position: relative;
  isolation: isolate;
  background-origin: border-box;
  background-image: linear-gradient(
    to right,
    var(--start-color),
    var(--end-color)
  );

  &::after {
    content: "";
    position: absolute;
    inset: -0.0625rem; /* .btn's border, so this layer covers it too */
    z-index: -1;
    opacity: 0;
    border-radius: inherit;
    background-image: linear-gradient(
      94deg,
      var(--hover-start-color) -119%,
      var(--hover-mid-color) 22.2%,
      var(--end-color) 218%
    );
    transition: opacity 0.17s linear;
  }

  /* Nested on purpose, so hover inherits this rule's selector list. Two things
     outrank a bare .btn-gradient otherwise, and both did:
     - Salient's `a:hover { color: inherit }` (style.css) hands the label back to
       the section colour, which is white in the hero and the footer.
     - The ::after above resolves through :is(), so it beat a standalone
       .btn-gradient:hover::after and pinned the hover layer at opacity 0.
     Only the submit button escaped both, its own selector being heavier. */
  .stretched-link:hover > &,
  &:hover,
  &:focus-visible {
    color: var(--color-primary);

    &::after {
      opacity: 1;
    }
  }
}

/* Flavour: rest stops + hover stops. The mechanic above is shared. */
.btn-gradient-green {
  --start-color: var(--color-brand-green);
  --end-color: var(--color-gradient-green-end);
  --hover-start-color: var(--color-gradient-yellow);
  --hover-mid-color: var(--color-brand-green);
}

.btn-secondary,
button[type="submit"].btn-secondary {
  background-color: var(--color-on-primary);
  color: var(--color-primary);
  border-color: var(--color-on-primary);

  &:hover {
    color: var(--color-primary);
    border-color: var(--color-on-primary);
  }
}

.btn-urgent,
button[type="submit"].btn-urgent {
  color: var(--color-urgent);

  &:hover {
    color: var(--color-urgent);
  }
}

.btn-square {
  justify-content: center;
}

.btn .btn-arrow {
  display: block;
  flex-shrink: 0;
  inline-size: 1rem;
  block-size: 1rem;
  background-color: currentColor;
  mask: var(--btn-arrow) center / contain no-repeat;
  -webkit-mask: var(--btn-arrow) center / contain no-repeat;
  mask-mode: alpha;
}