/* ==========================================================================
   Button fill animation
   Usage:
     1. Add class button--invert-hover to the button (handles overflow + hover)
     2. Add <span class="btn-fill" aria-hidden="true"></span> as first child
     3. Wrap text/icons in <span class="btn-text"></span>
   ========================================================================== */

.btn-fill {
  --motion-translateY: 76%;
  --btn-fill-color: rgb(var(--color-button-text));
  position: absolute;
  inset-block-start: -50%;
  inset-inline-start: -25%;
  width: 150%;
  height: 200%;
  border-radius: 50%;
  background-color: var(--btn-fill-color);
  border: 2px solid rgb(var(--color-button-background));
  transform: translateY(var(--motion-translateY));
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}

.btn-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: inherit;
  transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.button:not(:disabled):hover .btn-fill,
.button:not(:disabled):focus-visible .btn-fill {
  --motion-translateY: 0%;
}

.button:not(:disabled):hover .btn-text,
.button:not(:disabled):focus-visible .btn-text {
  color: rgb(var(--color-button-background));
}

/* Base transparent border so border-color can transition on hover */
.button:has(> .btn-fill) {
  border: 2px solid transparent;
  box-sizing: border-box;
  transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.button:has(> .btn-fill):not(:disabled):hover,
.button:has(> .btn-fill):not(:disabled):focus-visible {
  border-color: rgb(var(--color-button-background));
}

.button--invert-hover {
  overflow: hidden;
  border: 2px solid rgb(var(--color-button-background));
  box-sizing: border-box;
  transition:
    color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.button--invert-hover:hover:not(:disabled),
.button--invert-hover:focus-visible:not(:disabled) {
  background-color: transparent;
  color: rgb(var(--color-button-background));
  border: 2px solid rgb(var(--color-button-background));
}

.button--invert-hover:hover:not(:disabled)::after,
.button--invert-hover:focus-visible:not(:disabled)::after {
  box-shadow: none;
}