/*!
 * EldanCSS htmx companion — optional styles for htmx request and swap states.
 * Copyright (c) 2026 EldanCSS contributors
 * SPDX-License-Identifier: 0BSD
 * Licensed under the BSD Zero Clause License. See LICENSE.
 */

:root {
  --htmx-indicator-in: 120ms;
  --htmx-indicator-out: 240ms;
  --htmx-swap-duration: 160ms;
  --htmx-settle-duration: 200ms;
}

.htmx-indicator {
  opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

.htmx-indicator:empty {
  display: inline-block;
  inline-size: 0.85em;
  block-size: 0.85em;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  vertical-align: -0.125em;
}

.htmx-request:is(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]),
form.htmx-request :is(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]) {
  cursor: progress;
  pointer-events: none;
}

.htmx-request:is(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]),
form.htmx-request :is(button, input[type="submit"], input[type="button"], input[type="reset"]) {
  opacity: 0.65;
}

form.htmx-request {
  cursor: progress;
}

.htmx-error,
[data-htmx-error] {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--color-danger) 10%, var(--color-surface));
  color: var(--color-text);
}

.htmx-error > :first-child,
[data-htmx-error] > :first-child {
  margin-block-start: 0;
}

.htmx-error > :last-child,
[data-htmx-error] > :last-child {
  margin-block-end: 0;
}

:is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-danger);
}

@media (prefers-reduced-motion: no-preference) {
  .htmx-indicator {
    transition: opacity var(--htmx-indicator-out) ease-out;
  }

  .htmx-request .htmx-indicator,
  .htmx-request.htmx-indicator {
    transition-duration: var(--htmx-indicator-in);
    transition-timing-function: ease-in;
  }

  .htmx-request .htmx-indicator:empty,
  .htmx-request.htmx-indicator:empty {
    animation: htmx-spin 700ms linear infinite;
  }

  .htmx-request:is(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"]),
  form.htmx-request :is(button, input[type="submit"], input[type="button"], input[type="reset"]) {
    transition: opacity var(--htmx-swap-duration) ease;
  }

  .htmx-added {
    animation: htmx-fade-in var(--htmx-settle-duration) ease-out both;
  }

  .htmx-swapping {
    opacity: 0;
    transition: opacity var(--htmx-swap-duration) ease-in;
  }
}

@keyframes htmx-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes htmx-fade-in {
  from {
    opacity: 0;
  }
}