component BackToTop {
  props {
    threshold: number = 500
    label: string = "Back to top"
    ariaLabel: string = "Scroll back to top"
    icon: string = "icon-[lucide--arrow-up]"
    position: string = "right"
    offset: string = "md"
    behavior: string = "smooth"
    showProgress: boolean = false
    showLabel: boolean = false
    alwaysVisible: boolean = false
    size: string = "default"
    color: string = "primary"
    variant: string = "solid"
    shape: string = "round"
    class: string = ""
  }

  state visible: boolean = false
  state progress: number = 0

  view {
    <button
      {...attrs}
      data-ui-component="BackToTop"
      type="button"
      aria-label='{ariaLabel}'
      title='{label}'
      data-position='{position}'
      data-offset='{offset}'
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      data-shape='{shape}'
      data-show-label='{showLabel ? "true" : "false"}'
      data-progress='{showProgress ? "true" : "false"}'
      data-show='{alwaysVisible || visible}'
      class='wire-back-to-top {class}'
      style='--wire-back-to-top-progress: {progress}%;'
      @window:scroll='visible = window.scrollY >= threshold; progress = Math.min(100, Math.max(0, Math.round((window.scrollY / Math.max(1, document.documentElement.scrollHeight - window.innerHeight)) * 100)))'
      @click='window.scrollTo({ top: 0, behavior: behavior })'
    >
      {#if showProgress}
        <span class="wire-back-to-top__progress" aria-hidden="true"></span>
      {/if}

      <span class="wire-back-to-top__surface">
        <span class='wire-back-to-top__icon {icon}' aria-hidden="true"></span>

        {#if showLabel}
          <span class="wire-back-to-top__label">{label}</span>
        {/if}
      </span>

      <span class="wire-back-to-top__sr">{label}</span>
    </button>
  }

  style {
    .wire-back-to-top {
      --back-accent: var(--wire-color-primary);
      --back-accent-hover: var(--wire-color-primary-hover);
      --back-accent-soft: var(--wire-color-primary-soft);
      --back-contrast: var(--wire-color-primary-contrast);

      position: fixed;
      z-index: 70;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 3rem;
      min-height: 3rem;
      padding: 0;
      color: var(--back-contrast);
      background: transparent;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      filter: drop-shadow(0 14px 30px color-mix(in srgb, black 22%, transparent));
      transition:
        transform 180ms ease,
        opacity 180ms ease,
        filter 180ms ease;
    }

    .wire-back-to-top[data-color="secondary"] {
      --back-accent: var(--wire-color-secondary);
      --back-accent-hover: var(--wire-color-secondary-hover);
      --back-accent-soft: var(--wire-color-secondary-soft);
      --back-contrast: var(--wire-color-secondary-contrast);
    }

    .wire-back-to-top[data-color="info"] {
      --back-accent: var(--wire-color-info);
      --back-accent-hover: var(--wire-color-info-hover);
      --back-accent-soft: var(--wire-color-info-soft);
      --back-contrast: var(--wire-color-info-contrast);
    }

    .wire-back-to-top[data-color="success"] {
      --back-accent: var(--wire-color-success);
      --back-accent-hover: var(--wire-color-success-hover);
      --back-accent-soft: var(--wire-color-success-soft);
      --back-contrast: var(--wire-color-success-contrast);
    }

    .wire-back-to-top[data-color="warning"] {
      --back-accent: var(--wire-color-warning);
      --back-accent-hover: var(--wire-color-warning-hover);
      --back-accent-soft: var(--wire-color-warning-soft);
      --back-contrast: var(--wire-color-warning-contrast);
    }

    .wire-back-to-top[data-color="danger"] {
      --back-accent: var(--wire-color-danger);
      --back-accent-hover: var(--wire-color-danger-hover);
      --back-accent-soft: var(--wire-color-danger-soft);
      --back-contrast: var(--wire-color-danger-contrast);
    }

    .wire-back-to-top[data-position="right"] {
      right: 1.5rem;
    }

    .wire-back-to-top[data-position="left"] {
      left: 1.5rem;
    }

    .wire-back-to-top[data-position="center"] {
      left: 50%;
      transform: translateX(-50%);
    }

    .wire-back-to-top[data-position="center"]:hover {
      transform: translateX(-50%) translateY(-3px);
    }

    .wire-back-to-top[data-offset="sm"] {
      bottom: 1rem;
    }

    .wire-back-to-top[data-offset="md"] {
      bottom: 1.5rem;
    }

    .wire-back-to-top[data-offset="lg"] {
      bottom: 2rem;
    }

    .wire-back-to-top[data-offset="xl"] {
      bottom: 3rem;
    }

    .wire-back-to-top[data-size="sm"] {
      min-width: 2.5rem;
      min-height: 2.5rem;
    }

    .wire-back-to-top[data-size="lg"] {
      min-width: 3.5rem;
      min-height: 3.5rem;
    }

    .wire-back-to-top[data-show-label="true"] {
      min-width: 0;
    }

    .wire-back-to-top:hover {
      transform: translateY(-3px);
      filter: drop-shadow(0 18px 36px color-mix(in srgb, var(--back-accent) 24%, transparent));
    }

    .wire-back-to-top:active {
      transform: translateY(-1px) scale(0.98);
    }

    .wire-back-to-top__surface {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      min-width: 3rem;
      min-height: 3rem;
      padding: 0.75rem;
      color: var(--back-contrast);
      background:
        linear-gradient(145deg, color-mix(in srgb, white 10%, transparent), transparent 56%),
        var(--back-accent);
      border: 1px solid color-mix(in srgb, white 18%, transparent);
      border-radius: inherit;
      box-shadow:
        0 1px 0 color-mix(in srgb, white 20%, transparent) inset,
        0 10px 24px color-mix(in srgb, black 18%, transparent);
      backdrop-filter: blur(12px);
      transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease;
    }

    .wire-back-to-top[data-size="sm"] .wire-back-to-top__surface {
      min-width: 2.5rem;
      min-height: 2.5rem;
      padding: 0.58rem;
    }

    .wire-back-to-top[data-size="lg"] .wire-back-to-top__surface {
      min-width: 3.5rem;
      min-height: 3.5rem;
      padding: 0.9rem;
    }

    .wire-back-to-top[data-show-label="true"] .wire-back-to-top__surface {
      min-width: 0;
      padding-inline: 1rem;
    }

    .wire-back-to-top[data-variant="outline"] .wire-back-to-top__surface {
      color: var(--back-accent);
      background: color-mix(in srgb, var(--wire-color-surface-raised) 88%, transparent);
      border-color: color-mix(in srgb, var(--back-accent) 46%, var(--wire-color-border));
    }

    .wire-back-to-top[data-variant="soft"] .wire-back-to-top__surface {
      color: var(--back-accent);
      background: color-mix(in srgb, var(--back-accent-soft) 88%, var(--wire-color-surface-raised));
      border-color: color-mix(in srgb, var(--back-accent) 22%, var(--wire-color-border));
    }

    .wire-back-to-top[data-variant="ghost"] .wire-back-to-top__surface {
      color: var(--back-accent);
      background: color-mix(in srgb, var(--wire-color-surface-raised) 68%, transparent);
      border-color: transparent;
      box-shadow: none;
    }

    .wire-back-to-top[data-variant="minimal"] .wire-back-to-top__surface {
      color: var(--back-accent);
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      backdrop-filter: none;
    }

    .wire-back-to-top[data-shape="rounded"] {
      border-radius: 0.9rem;
    }

    .wire-back-to-top[data-shape="pill"] {
      border-radius: 999px;
    }

    .wire-back-to-top__progress {
      position: absolute;
      inset: -0.22rem;
      z-index: 1;
      border-radius: inherit;
      background: conic-gradient(
        var(--back-accent) var(--wire-back-to-top-progress),
        color-mix(in srgb, var(--wire-color-border) 72%, transparent) var(--wire-back-to-top-progress)
      );
      mask: radial-gradient(farthest-side, transparent calc(100% - 0.18rem), #000 calc(100% - 0.17rem));
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.18rem), #000 calc(100% - 0.17rem));
      pointer-events: none;
    }

    .wire-back-to-top__icon {
      width: 1.1rem;
      height: 1.1rem;
      flex: 0 0 auto;
    }

    .wire-back-to-top[data-size="sm"] .wire-back-to-top__icon {
      width: 0.95rem;
      height: 0.95rem;
    }

    .wire-back-to-top[data-size="lg"] .wire-back-to-top__icon {
      width: 1.25rem;
      height: 1.25rem;
    }

    .wire-back-to-top__label {
      white-space: nowrap;
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1;
    }

    .wire-back-to-top__sr {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .wire-back-to-top:focus-visible {
      outline: 2px solid var(--wire-color-focus);
      outline-offset: 4px;
    }

    @media (max-width: 639px) {
      .wire-back-to-top[data-position="right"] {
        right: 1rem;
      }

      .wire-back-to-top[data-position="left"] {
        left: 1rem;
      }

      .wire-back-to-top[data-offset="lg"],
      .wire-back-to-top[data-offset="xl"] {
        bottom: 1.25rem;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .wire-back-to-top,
      .wire-back-to-top__surface {
        transition: none;
      }

      .wire-back-to-top:hover,
      .wire-back-to-top[data-position="center"]:hover {
        transform: none;
      }
    }
  }
}