/* Base indicator - hidden by default */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

/* Show indicator when request is active */
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Request state classes */
.htmx-request {
    cursor: wait;
    opacity: 0.8;
}

/* Button styles during request */
.htmx-request button[type="submit"],
.htmx-request input[type="submit"] {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

/* Button spinner using ::before pseudo-element */
.htmx-request button[type="submit"]::before,
.htmx-request input[type="submit"]::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: htmx-spin 0.8s linear infinite;
}

/* Input styles during request */
.htmx-request input[type="text"],
.htmx-request input[type="email"],
.htmx-request input[type="password"],
.htmx-request input[type="number"],
.htmx-request textarea,
.htmx-request select {
    opacity: 0.6;
    pointer-events: none;
}

/* Swapping state */
.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

/* Settling state */
.htmx-settling {
    opacity: 1;
    transition: opacity 200ms ease-in;
}

/* Added content animation */
.htmx-added {
    animation: htmx-fade-in 300ms ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* HTMX fade-in with slide-down animation */
@keyframes htmx-fade-in {
    from { 
        opacity: 0;
        transform: translateY(-10px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* HTMX spinning animation for button spinners */
@keyframes htmx-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}