.choices__input--cloned {
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix height issues with horizontal scroll */
.choices {
    /* min-height: 38px !important; */
}

.choices::after {
    color: white !important;
    content: '
        <iconify-icon
            icon="lucide:chevron-down"
        ></iconify-icon>
    ';
}

.choices__inner {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-radius: var(--rounded-btn, 0.5rem);
    display: flex;
    align-items: center;
}

.choices__button {
    color: white !important;
    background: none !important;
}
.choices__button::after {
    content: '
        <iconify-icon
            icon="lucide:x"
        ></iconify-icon>
    ' !important;
}

.choices__list--multiple {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 !important;
}

.choices__list--multiple .choices__item {
    margin: 0 !important;
    padding: 2px 8px !important;
    white-space: nowrap !important;
}

/* HTMX Indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request.htmx-indicator {
    display: inline;
}

.color-icon-dark {
    border-radius: 6px;
    aspect-ratio: 1 / 1;
    padding: 0 0.2rem;
}

.dark .color-icon-dark {
    background-color: currentColor;
}

.color-icon {
    border-radius: 6px;
    aspect-ratio: 1 / 1;
    background-color: currentColor;
    padding: 0 0.2rem;
}

.dark .color-icon {
    background-color: unset;
}

.spinner {
    animation: spinner-rotation 0.8s linear infinite;
}

@keyframes spinner-rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.bg-surface-card {
    background: var(--main-content-background);
}

.bg-main-content {
    background: var(--main-content-background);
}

.dark .bg-surface-primary {
    background-color: #1e2329;
}

.dark .bg-surface-items {
    background-color: #252b32;
}

.dark .border-primary {
    border-color: #3c4149;
}

.border-muted {
    border-color: #3c4149;
}

.icon-btn {
    border-radius: 6px;
    height: 32px;
    width: 32px;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.delete-btn {
    background-color: rgba(101, 59, 71, 0.4);
}

.delete-btn:hover {
    background-color: rgba(33, 33, 33, 1);
}

.delete-btn iconify-icon {
    color: var($danger);
}

:root {
    --bs-danger: #dc3545;
}

/* .text-danger {
    color: #f31261;
} */

.text-muted-foreground {
    color: #a2adb9;
}

html {
    @apply dark:text-white;
}