/*!
 * loader-buttons — button surface styles
 *
 * Every visual decision is exposed as a `--lb-*` custom property. Override them
 * on `.lb-loader-button`, on any ancestor, or through the `style` option.
 */

@property --lb-rim-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}

/* The package never sets a global reset, so it declares its own box model. */
.lb-loader-button,
.lb-loader-button *,
.lb-loader-button *::before,
.lb-loader-button *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */

.lb-loader-button {
  /* Geometry */
  --lb-width: 150px;
  --lb-height: 58px;
  --lb-radius: 9999px;
  --lb-slot-size: 30px;
  --lb-gap: 9px;
  --lb-padding-inline: 13.3px;

  /* Type */
  --lb-font-family: inherit;
  --lb-font-size: 19px;
  --lb-font-weight: 400;
  --lb-letter-spacing: -0.19px;
  --lb-line-height: 28.5px;

  /* Color */
  --lb-ink: #191919;
  --lb-label-color: #363636;
  --lb-surface: rgba(255, 255, 255, 0.55);
  --lb-surface-gradient: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1)
  );
  --lb-border-color: rgba(255, 255, 255, 0.9);
  --lb-border-width: 1px;
  --lb-blur: 8px;
  --lb-shadow:
    0 1px 4px rgba(255, 255, 255, 0.667) inset,
    0 -4px 4px rgba(255, 255, 255, 0.85) inset,
    0 0 14px rgba(229, 229, 229, 0.55) inset,
    0 11px 28px rgba(0, 0, 0, 0.07),
    0 23px 31px rgba(0, 0, 0, 0.05);
  --lb-sheen-color: rgba(255, 255, 255, 0.5);
  --lb-sheen-blend: soft-light;
  --lb-rim-color: rgba(0, 0, 0, 0.5);
  --lb-rim-highlight: rgba(255, 255, 255, 0.5);
  --lb-focus-ring: rgba(25, 25, 25, 0.58);
  --lb-hover-surface: transparent;

  /* Motion */
  --lb-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --lb-duration: 0.4s;
  --lb-press-duration: 110ms;
  --lb-press-scale: 0.975;
  --lb-tilt-angle: 25deg;
  --lb-tilt-duration: 0.18s;

  display: inline-flex;
  width: var(--lb-width);
  height: var(--lb-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  transform: rotateX(0deg);
  transform-style: preserve-3d;
  transition: transform var(--lb-tilt-duration) var(--lb-ease);
  vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 * Sizes
 * ------------------------------------------------------------------ */

.lb-loader-button[data-lb-size="sm"] {
  --lb-width: 114px;
  --lb-height: 42px;
  --lb-slot-size: 24px;
  --lb-gap: 5px;
  --lb-padding-inline: 8.45px;
  --lb-font-size: 13px;
  --lb-letter-spacing: -0.14px;
  --lb-line-height: 19.5px;
}

.lb-loader-button[data-lb-size="lg"] {
  --lb-width: 186px;
  --lb-height: 72px;
  --lb-slot-size: 38px;
  --lb-gap: 11px;
  --lb-padding-inline: 17px;
  --lb-font-size: 23px;
  --lb-letter-spacing: -0.23px;
  --lb-line-height: 34px;
}

@media (max-width: 690px) {
  .lb-loader-button[data-lb-responsive="true"][data-lb-size="md"] {
    --lb-width: 114px;
    --lb-height: 42px;
    --lb-slot-size: 24px;
    --lb-gap: 5px;
    --lb-padding-inline: 8.45px;
    --lb-font-size: 13px;
    --lb-letter-spacing: -0.14px;
    --lb-line-height: 19.5px;
  }

  .lb-loader-button[data-lb-responsive="true"][data-lb-size="lg"] {
    --lb-width: 150px;
    --lb-height: 58px;
    --lb-slot-size: 30px;
    --lb-gap: 9px;
    --lb-padding-inline: 13.3px;
    --lb-font-size: 19px;
    --lb-letter-spacing: -0.19px;
    --lb-line-height: 28.5px;
  }
}

/* ------------------------------------------------------------------ *
 * Shapes, width, layout modifiers
 * ------------------------------------------------------------------ */

.lb-loader-button[data-lb-shape="rounded"] {
  --lb-radius: 16px;
}

.lb-loader-button[data-lb-shape="square"] {
  --lb-radius: 4px;
}

.lb-loader-button[data-lb-full-width="true"] {
  --lb-width: 100%;
  display: flex;
  width: 100%;
}

/* ------------------------------------------------------------------ *
 * Surface
 * ------------------------------------------------------------------ */

.lb-button {
  position: relative;
  z-index: 0;
  display: flex;
  width: 100%;
  height: 100%;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: var(--lb-border-width) solid var(--lb-border-color);
  border-radius: var(--lb-radius);
  background: var(--lb-surface-gradient), var(--lb-surface);
  box-shadow: var(--lb-shadow);
  color: var(--lb-ink);
  font: inherit;
  -webkit-backdrop-filter: blur(var(--lb-blur));
  backdrop-filter: blur(var(--lb-blur));
  cursor: pointer;
  isolation: isolate;
  transform: translateZ(0) scale(1);
  transition: transform var(--lb-duration) var(--lb-ease);
  -webkit-tap-highlight-color: transparent;
}

.lb-loader-button[data-lb-press="true"] .lb-button:hover {
  transform: translateZ(0) scale(var(--lb-press-scale));
}

.lb-loader-button[data-lb-press="true"] .lb-button:active,
.lb-loader-button[data-lb-press="true"] .lb-button.is-replaying {
  transform: translateZ(0) scale(var(--lb-press-scale));
  transition-duration: var(--lb-press-duration);
}

.lb-loader-button[data-lb-tilt="true"]:active,
.lb-loader-button[data-lb-tilt="true"].is-replaying {
  transform: rotateX(var(--lb-tilt-angle));
}

.lb-button:focus {
  outline: none;
}

.lb-button:focus-visible {
  outline: 2px solid var(--lb-focus-ring);
  outline-offset: 3px;
}

.lb-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.lb-loader-button:has(.lb-button:disabled) {
  pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Content
 * ------------------------------------------------------------------ */

.lb-content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 var(--lb-padding-inline);
  align-items: center;
  justify-content: center;
  gap: var(--lb-gap);
  border-radius: inherit;
}

.lb-loader-button[data-lb-icon-position="end"] .lb-content {
  flex-direction: row-reverse;
}

.lb-slot {
  position: relative;
  display: block;
  width: var(--lb-slot-size);
  height: var(--lb-slot-size);
  flex: 0 0 var(--lb-slot-size);
  color: var(--lb-ink);
  contain: strict;
  transition:
    width var(--lb-duration) var(--lb-ease),
    flex-basis var(--lb-duration) var(--lb-ease),
    opacity calc(var(--lb-duration) / 2) var(--lb-ease);
}

.lb-loader-button[data-lb-loading="false"] .lb-slot {
  width: 0;
  flex-basis: 0;
  opacity: 0;
}

.lb-loader-button[data-lb-loading="false"] .lb-content {
  gap: 0;
}

/* The runtime inserts one host span per mount; the design's own root sits
   inside it. Both fill the slot. */
.lb-slot > *,
.lb-slot > * > * {
  display: block;
  width: 100%;
  height: 100%;
}

.lb-label {
  position: relative;
  min-width: 0;
  overflow: hidden;
  color: var(--lb-label-color);
  font-family: var(--lb-font-family);
  font-size: var(--lb-font-size);
  font-weight: var(--lb-font-weight);
  letter-spacing: var(--lb-letter-spacing);
  line-height: var(--lb-line-height);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-label:empty {
  display: none;
}

/* ------------------------------------------------------------------ *
 * Sheen and rim
 * ------------------------------------------------------------------ */

.lb-sheen,
.lb-rim {
  position: absolute;
  display: block;
  border-radius: inherit;
  pointer-events: none;
}

.lb-sheen {
  z-index: 3;
  inset: 0.6px;
  overflow: clip;
  background: linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0) 0%,
      var(--lb-sheen-color) 40%,
      var(--lb-sheen-color) 50%,
      rgba(255, 255, 255, 0) 55%
    )
    no-repeat 0% 50% / 200% 200%;
  mix-blend-mode: var(--lb-sheen-blend);
  transition: background-position calc(var(--lb-duration) + 0.1s) var(--lb-ease);
}

.lb-button:hover .lb-sheen {
  background-position: 25% 50%;
}

.lb-rim {
  --lb-rim-angle: -75deg;
  z-index: 1;
  inset: -0.5px;
  padding: 1px;
  background:
    conic-gradient(
      from var(--lb-rim-angle),
      var(--lb-rim-color),
      rgba(0, 0, 0, 0) 5%,
      rgba(0, 0, 0, 0) 40%,
      var(--lb-rim-color) 50%,
      rgba(0, 0, 0, 0) 60%,
      rgba(0, 0, 0, 0) 95%,
      var(--lb-rim-color)
    ),
    linear-gradient(var(--lb-rim-highlight), var(--lb-rim-highlight));
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.35) inset;
  opacity: 1;
  transition: --lb-rim-angle calc(var(--lb-duration) + 0.1s) var(--lb-ease);
  -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;
}

.lb-button:hover .lb-rim {
  --lb-rim-angle: -125deg;
}

/* ------------------------------------------------------------------ *
 * Variants
 * ------------------------------------------------------------------ */

.lb-loader-button[data-lb-variant="solid"] {
  --lb-surface: #ffffff;
  --lb-surface-gradient: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  );
  --lb-border-color: rgba(25, 25, 25, 0.08);
  --lb-blur: 0px;
  --lb-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 20px rgba(0, 0, 0, 0.08);
  --lb-sheen-color: rgba(255, 255, 255, 0.35);
}

.lb-loader-button[data-lb-variant="outline"] {
  --lb-surface: transparent;
  --lb-surface-gradient: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  );
  --lb-border-color: rgba(25, 25, 25, 0.22);
  --lb-blur: 0px;
  --lb-shadow: none;
  --lb-sheen-color: rgba(255, 255, 255, 0);
}

.lb-loader-button[data-lb-variant="ghost"] {
  --lb-surface: transparent;
  --lb-surface-gradient: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  );
  --lb-border-color: transparent;
  --lb-border-width: 0px;
  --lb-blur: 0px;
  --lb-shadow: none;
  --lb-sheen-color: rgba(255, 255, 255, 0);
  --lb-hover-surface: rgba(25, 25, 25, 0.06);
}

.lb-loader-button[data-lb-variant="ghost"] .lb-button:hover {
  background: var(--lb-hover-surface);
}

/* ------------------------------------------------------------------ *
 * Themes
 * ------------------------------------------------------------------ */

.lb-loader-button[data-lb-theme="dark"] {
  --lb-ink: #f4f4f4;
  --lb-label-color: #ededed;
  --lb-surface: rgba(255, 255, 255, 0.07);
  --lb-surface-gradient: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.02)
  );
  --lb-border-color: rgba(255, 255, 255, 0.16);
  --lb-shadow:
    0 1px 3px rgba(255, 255, 255, 0.12) inset,
    0 -4px 8px rgba(255, 255, 255, 0.05) inset,
    0 12px 30px rgba(0, 0, 0, 0.45);
  --lb-sheen-color: rgba(255, 255, 255, 0.18);
  --lb-sheen-blend: overlay;
  --lb-rim-color: rgba(255, 255, 255, 0.45);
  --lb-rim-highlight: rgba(255, 255, 255, 0.08);
  --lb-focus-ring: rgba(255, 255, 255, 0.72);
  --lb-hover-surface: rgba(255, 255, 255, 0.1);
}

.lb-loader-button[data-lb-theme="dark"][data-lb-variant="solid"] {
  --lb-surface: #1c1c1c;
  --lb-border-color: rgba(255, 255, 255, 0.1);
}

.lb-loader-button[data-lb-theme="dark"][data-lb-variant="outline"] {
  --lb-border-color: rgba(255, 255, 255, 0.28);
}

@media (prefers-color-scheme: dark) {
  .lb-loader-button[data-lb-theme="auto"] {
    --lb-ink: #f4f4f4;
    --lb-label-color: #ededed;
    --lb-surface: rgba(255, 255, 255, 0.07);
    --lb-surface-gradient: linear-gradient(
      -75deg,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.09),
      rgba(255, 255, 255, 0.02)
    );
    --lb-border-color: rgba(255, 255, 255, 0.16);
    --lb-shadow:
      0 1px 3px rgba(255, 255, 255, 0.12) inset,
      0 -4px 8px rgba(255, 255, 255, 0.05) inset,
      0 12px 30px rgba(0, 0, 0, 0.45);
    --lb-sheen-color: rgba(255, 255, 255, 0.18);
    --lb-sheen-blend: overlay;
    --lb-rim-color: rgba(255, 255, 255, 0.45);
    --lb-rim-highlight: rgba(255, 255, 255, 0.08);
    --lb-focus-ring: rgba(255, 255, 255, 0.72);
    --lb-hover-surface: rgba(255, 255, 255, 0.1);
  }

  .lb-loader-button[data-lb-theme="auto"][data-lb-variant="solid"] {
    --lb-surface: #1c1c1c;
    --lb-border-color: rgba(255, 255, 255, 0.1);
  }

  .lb-loader-button[data-lb-theme="auto"][data-lb-variant="outline"] {
    --lb-border-color: rgba(255, 255, 255, 0.28);
  }
}

/* ------------------------------------------------------------------ *
 * Failure and reduced motion
 * ------------------------------------------------------------------ */

.lb-slot[data-loader-error]::after {
  position: absolute;
  inset: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .lb-loader-button,
  .lb-button,
  .lb-slot,
  .lb-sheen,
  .lb-rim {
    transition-duration: 0.01ms !important;
  }

  .lb-loader-button[data-lb-tilt="true"]:active,
  .lb-loader-button[data-lb-tilt="true"].is-replaying {
    transform: none;
  }
}