/* Alle variabelen die worden gebruikt door de andere css'en */
:root {
    /*
     * Kleuren
     */
    --hobi-color-text: #111827;
    --hobi-color-text-secondary: #374151;
    --hobi-color-muted: #6b7280;
    --hobi-color-error: #dc2626;
    --hobi-color-accent: #CF6DA6;

    --hobi-color-background: #ffffff;
    --hobi-color-surface: #f9fafb;
    --hobi-color-surface-muted: #f3f4f6;
    --hobi-color-surface-strong: #e5e7eb;

    --hobi-color-border: #d1d5db;
    --hobi-color-border-light: #e5e7eb;
    --hobi-color-border-hover: #9ca3af;
    --hobi-color-border-focus: #7c3aed;

    --hobi-color-selected-background: #ede9fe;
    --hobi-color-selected-text: #5b21b6;
    --hobi-color-option-hover: #f3f4f6;

    --hobi-color-disabled-text: #9ca3af;
    --hobi-color-disabled-background: #f3f4f6;

    /*
     * Transparante kleuren
     */
    --hobi-color-focus-ring: rgba(124, 58, 237, 0.15);
    --hobi-color-focus-ring-open: rgba(124, 58, 237, 0.12);
    --hobi-color-visual-border: rgba(17, 24, 39, 0.2);
}



.hobi-community-app {
    min-height: 320px;
    padding: 24px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
}
.hobi-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hobi-select-option__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    font-size: 21px;
    line-height: 1;
}

.hobi-select-option__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hobi-select-no-results {
    padding: 10px 12px;
}

.hobi-field .ts-wrapper {
    width: 100%;
}

.hobi-field .ts-control {
    min-height: 44px;
    align-items: center;
}