/* Pill buttons, ported from gazeunlock.com's LiquidButton (gaze-site/src/components/ui/liquid-glass-button.module.css). */

.pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0.45rem 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.006em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition-property: transform, background-color, border-color, box-shadow, filter;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}
.pill:hover { text-decoration: none; }
.pill-lg { min-height: 52px; padding: 0.6rem 28px; font-size: 18px; }

/* Negative stacking keeps the highlight under the label. */
.pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.pill > * { position: relative; z-index: 1; }

.pill-solid {
  background-color: color-mix(in srgb, var(--accent) 98%, transparent);
  border: 1px solid transparent;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
  color: #fff;
}
.pill-solid::before {
  padding: 1px;
  background: linear-gradient(135deg, rgb(255 255 255 / 0.55), transparent 45%, rgb(255 255 255 / 0.3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Same pill as the blue one, filled with the page's ink colour for a secondary action. */
.pill-neutral { background-color: var(--ink); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .pill-solid.pill-neutral:hover { background-color: color-mix(in srgb, var(--ink) 88%, var(--bg)); } }


@media (hover: hover) and (pointer: fine) {
  .pill-solid:hover { background-color: var(--accent); box-shadow: 0 3px 10px rgb(0 0 0 / 0.35); }
}
.pill:active { transform: scale(0.97); }
.pill-solid:active { filter: brightness(0.97); }
.pill:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .pill, .pill:hover, .pill:active { transition: none; transform: none; filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
    .pill::before { display: none; }
}
@media (forced-colors: active) {
  .pill { forced-color-adjust: auto; box-shadow: none; }
  .pill::before { display: none; }
  .pill-solid { background-color: ButtonText; border: 1px solid ButtonText; color: ButtonFace; }
  }