/*
  arrow-fill.css
  Rounded-square button with a white tile on the right, matching the nav CTA.
  Hover, keyboard focus, and a touch press grow that tile from its own centre
  until it covers the label. The arrow leaves to the right and the next arrow
  arrives from the left.
*/

.arrow-fill {
  --icon-inset: 0.32rem;
  --icon-circle: calc(3.75rem - (2 * var(--icon-inset)));
  --icon-right: var(--icon-inset);
  --mark-radius: 6px;
  --pad-x: 1.35rem;
  --pad-gap: 0.85rem;
  --fill-scale: 16;
  --btn-bg: var(--accent);
  --btn-text: var(--on-accent);
  --btn-fill-bg: var(--white);
  --btn-fill-text: var(--orange-minus-700);
  --btn-fill-bg-hover: var(--white);
  --btn-fill-text-hover: var(--orange-minus-700);
  --btn-arrow: var(--orange-minus-700);
  --btn-arrow-hover: var(--orange-minus-700);
  --ease-fill: cubic-bezier(0.785, 0.135, 0.15, 0.86);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  height: 3.75rem;
  padding: 0 var(--pad-x);
  padding-right: calc(var(--icon-circle) + var(--icon-right) + var(--pad-gap));
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  white-space: nowrap;
  text-rendering: geometricPrecision;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.arrow-fill__text {
  position: relative;
  z-index: 1;
  padding-bottom: 1px;
  white-space: nowrap;
}

.arrow-fill__fill,
.arrow-fill__ghost,
.arrow-fill__icon {
  pointer-events: none;
}

.arrow-fill__fill {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: var(--icon-right);
  width: var(--icon-circle);
  height: var(--icon-circle);
  border-radius: var(--mark-radius);
  background: var(--btn-fill-bg);
  transform: translateY(-50%) scale(1);
  transform-origin: center;
}

.arrow-fill__ghost {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  padding-right: calc(var(--icon-circle) + var(--icon-right) + var(--pad-gap));
  color: var(--btn-fill-text);
  clip-path: inset(
    calc(50% - var(--icon-circle) / 2)
    var(--icon-right)
    calc(50% - var(--icon-circle) / 2)
    calc(100% - var(--icon-right) - var(--icon-circle))
    round var(--mark-radius)
  );
}

.arrow-fill__icon {
  position: absolute;
  z-index: 3;
  right: var(--icon-right);
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-circle);
  height: var(--icon-circle);
  transform: translateY(-50%);
  overflow: hidden;
  border-radius: var(--mark-radius);
  background: var(--btn-fill-bg);
  color: var(--btn-arrow);
}

.arrow-fill__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.25rem;
  height: 1.25rem;
  transform-origin: center;
}

.arrow-fill__arrow--in {
  transform: translate(-170%, -50%) scale(0);
}

.arrow-fill__arrow--out {
  transform: translate(-50%, -50%);
}

.arrow-fill.is-ready .arrow-fill__fill {
  transition: transform 500ms var(--ease-fill), background-color 500ms var(--ease-fill);
}

.arrow-fill.is-ready .arrow-fill__ghost {
  transition: clip-path 500ms var(--ease-fill), color 500ms var(--ease-fill);
}

.arrow-fill.is-ready .arrow-fill__icon {
  transition: background-color 500ms var(--ease-fill), color 500ms var(--ease-fill);
}

.arrow-fill.is-ready .arrow-fill__arrow {
  transition: transform 500ms var(--ease-fill);
}

.arrow-fill.is-ready:is(:hover, :focus-visible, [data-pressed="true"]) .arrow-fill__fill {
  background: var(--btn-fill-bg-hover);
  transform: translateY(-50%) scale(var(--fill-scale));
}

.arrow-fill.is-ready:is(:hover, :focus-visible, [data-pressed="true"]) .arrow-fill__ghost {
  color: var(--btn-fill-text-hover);
  clip-path: inset(
    calc(50% - var(--icon-circle) / 2 * var(--fill-scale))
    calc(var(--icon-right) + var(--icon-circle) / 2 * (1 - var(--fill-scale)))
    calc(50% - var(--icon-circle) / 2 * var(--fill-scale))
    calc(100% - var(--icon-right) - var(--icon-circle) / 2 * (1 + var(--fill-scale)))
    round calc(var(--mark-radius) * var(--fill-scale))
  );
}

.arrow-fill.is-ready:is(:hover, :focus-visible, [data-pressed="true"]) .arrow-fill__icon {
  background: var(--btn-fill-bg-hover);
  color: var(--btn-arrow-hover);
}

.arrow-fill.is-ready:is(:hover, :focus-visible, [data-pressed="true"]) .arrow-fill__arrow--in {
  transform: translate(-50%, -50%) scale(1);
}

.arrow-fill.is-ready:is(:hover, :focus-visible, [data-pressed="true"]) .arrow-fill__arrow--out {
  transform: translate(70%, -50%) scale(0);
}

@media (max-width: 1025px) {
  .arrow-fill {
    --icon-circle: calc(3.5rem - (2 * var(--icon-inset)));
    --pad-x: 1.15rem;
    height: 3.5rem;
  }

  .arrow-fill__arrow {
    width: 1.15rem;
    height: 1.15rem;
  }
}

/*
  White on Orange Minus 500 needs the 18px bold large-text allowance.
  Below that size the resting fill switches to Orange Minus 700, which
  keeps white text above 4.5:1.
*/
@media (max-width: 420px) {
  .arrow-fill {
    --icon-inset: 0.28rem;
    --icon-circle: calc(3.25rem - (2 * var(--icon-inset)));
    --pad-x: 0.85rem;
    --pad-gap: 0.55rem;
    --btn-bg: var(--orange-minus-700);
    height: 3.25rem;
    font-size: 0.9375rem;
  }

  .arrow-fill__arrow {
    width: 1rem;
    height: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arrow-fill.is-ready .arrow-fill__fill,
  .arrow-fill.is-ready .arrow-fill__ghost,
  .arrow-fill.is-ready .arrow-fill__icon,
  .arrow-fill.is-ready .arrow-fill__arrow {
    transition: none;
  }
}