.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: block;
}
.htmx-request.htmx-indicator {
    display: block;
}

details {
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
}

summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}

details[open] {
    padding: 0.5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
}

/* Optional: Add some animation */
[popover]:popover-open {
    animation: slide-in 0.2s ease;
    width: 400px;
    height: 300px;
    position: absolute;
    margin: 0;
    border-radius: 5px;
    padding: 10px;
    border: 1px solid #c4c4c4;
}

[popover][data-anchor-id]:popover-open {
    position-anchor: var(--anchor);
    top: anchor(var(--anchor) bottom);
    left: anchor(var(--anchor) right);
}

button[popovertarget] {
    anchor-name: var(--anchor-name);
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

button {
    cursor: pointer;
}