/*
  Define default color variables on the :root element.
  Integrators can override these in their own CSS.
*/
:root {
    --ke-search-suggest-bg: #fff;
    --ke-search-suggest-color: #222;
    --ke-search-suggest-bg-active: #222;
    --ke-search-suggest-color-active: #fff;
}

/* Container for the suggestion items */
.ke_search_sword-items {
    margin: 0;
    padding: 0;
    list-style: none; /* Remove default list styling if using <ul> or <ol> */
}

/* Single suggestion item */
.ke_search_sword-item {
    background: var(--ke-search-suggest-bg);         /* Use variable for background */
    color: var(--ke-search-suggest-color);           /* Use variable for text color */
    padding: 8px 12px;                              /* Spacing inside the item */
    cursor: pointer;                                /* Show pointer cursor on hover */
    transition: background 0.2s, color 0.2s;        /* Smooth color transitions */
}

/* Active or hover state: invert colors using variables */
.ke_search_sword-item.active,
.ke_search_sword-item:hover {
    background: var(--ke-search-suggest-bg-active);  /* Use variable for active background */
    color: var(--ke-search-suggest-color-active);    /* Use variable for active text color */
}