/*----------------------------------------
    Note:
    - This input is used in calendar main.
 ----------------------------------------*/
.input-search {
    @apply w-[250px] h-[40px] sm:h-[30px] xl:h-[40px] border-0 p-2 bg-transparent text-color;
    /*
        Styles for search input:
        - Fixed width and height with responsive adjustments.
        - Transparent background with white text.
        - Border bottom style.
    */
}

.input-search:focus {
    @apply outline-0;
    /*
        Removes outline on focus for search input.
    */
}

.input-search::-webkit-input-placeholder {
    color: var(--text-color);
    /*
        Placeholder color for search input.
    */
}

/*----------------------------------------
    Modal Search
 ----------------------------------------*/
.form-search {
    @apply bg-gray-100 min-h-[250px] max-h-[500px] rounded-lg shadow-lg
    flex flex-col justify-between text-[--bg-color];
}

.search-header {
    @apply p-2;
}

.icon-search {
    @apply inset-y-0 start-0 flex items-center ps-3 pointer-events-none text-[--bg-color];
}

.search-values {
    @apply block w-full p-4 ps-10 text-sm border border-bg-color
    rounded-lg bg-transparent focus:outline-0;
}

.search-values::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.search-values::placeholder {
    @apply text-[--bg-color];
}

.search-body {
    @apply w-full flex flex-1 flex-col gap-5 justify-between self-center text-center shadow-lg p-3 rounded-lg;
}

.search-body .search-warning,
.search-body .search-loading,
.search-body .no-results {
    @apply text-xs text-[--bg-color] font-bold;
}

.search-body .search-results {
    @apply flex flex-col gap-2 content-center uppercase text-xs font-bold max-h-[250px] overflow-y-auto;
}

.search-body .info-entity {
    @apply flex flex-col gap-2 text-sm text-start border border-bg-color cursor-pointer
    p-2 rounded-md shadow-sm font-medium;
}

.search-body .info-entity.hoverHighlight {
    @apply hover:bg-color hover:text-color;
}

.search-body .info-entity.highlight {
    @apply bg-color text-color;
}

.search-body .info-entity .more-info-entity {
    @apply flex flex-col gap-[2px] text-xs;
}


.search-body .navigations {
    @apply flex flex-wrap gap-2 justify-between items-center text-[--bg-color] text-justify;
}

.search-body .navigations .buttons-navigation {
    @apply flex gap-2 items-center;
}

.search-body .navigations .buttons-navigation i {
    @apply h-7 w-7 text-color bg-color font-bold rounded-full flex items-center justify-center text-xs;
}

.search-body .navigations .buttons-navigation span {
    @apply text-xs uppercase font-bold;
}