/* ============================================================================
   06-COMPONENTS -> #SEARCH
   ========================================================================= */

/**
 * 
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Search
 */

.search {
    --search-bg: var(--form-input-bg);
    --search-bg-size: var(--space-5);
    --search-color: var(--form-input-color);
    --search-border-color: var(--form-input-border-color);
    --search-border-radius: var(--form-input-border-radius);
    --search-border-width: var(--form-input-border-width);
    --search-height: var(--form-input-height);
    --search-shadow: var(--form-input-shadow);
    --search-padding-x: var(--form-input-padding-x);
    --search-padding-y: var(--form-input-padding-y);
    --search-item-bg: var(--space-6);
    --search-item-padding-x: var(--space-5);
    --search-item-padding-y: var(--space-6);
    --search-item-active-bg: var(--bg-highlight);
    --search-item-active-bordrer-color: var(--border-color-highlight);

    background-color: var(--search-bg);
    border: var(--search-border-width) solid var(--search-border-color);
    border-radius: var(--search-border-radius);
    box-shadow: var(--search-shadow);
    width: 100%
}


/**
 * Search bar
 */

.search__bar {
    align-items: center;
    border-bottom: var(--search-border-width) solid var(--search-border-color);
    display: flex;
    position: relative;
}


/**
 * Search bar input
 */

.search__bar-input {
    border: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    display: block;
    height: var(--space-14);
    padding-left: var(--space-11);
    width: 100%;
}


/**
 * Search bar icon
 */

.search__bar-icon {
    color: var(--input-placeholder-color);
    fill: none;
    height: var(--space-5);
    left: var(--space-3);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--space-5);
}


/**
 * Search bar button
 */

.search__bar-button {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
}


/**
 * Command menu results
 */

.search__results {
    overflow: hidden;
}


/**
 * Command menu results
 */

.search__results {
    @include scrollbar;
    max-height: 20rem;
    overflow-y: auto;
    padding: var(--search-padding-y) var(--search-padding-x);

    & > * + * {
        margin-top: var(--space-3);
    }
}


/**
 * Search results placeholder
 */

.search__results-placeholder {
    align-items: center;
    border: var(--border-width) solid var(--form-input-border-color);
    border-radius: var(--form-input-border-radius);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-bottom: var(--space-10);
    padding-top: var(--space-10);

    @include media-breakpoint-up('lg') {
        padding-left: var(--space-24);
        padding-right: var(--space-24);
    }
}


/**
 * Search results item
 */

.search__results-item {
    @include transition(('border-color', 'background-color'), var(--duration-md));
    align-items: flex-start;
    border: var(--search-border-width) solid var(--search-border-color);
    border-radius: var(--search-border-radius);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--search-item-padding-y) var(--search-item-padding-x);
}


/**
 * Search results item controls
 */

.search__results-item-controls {
    align-items: center;
    display: flex;
    flex-direction: row;

    & > * + * {
        margin-left: var(--space-2);
    }

    @include media-breakpoint-down('md') {
        flex-wrap: wrap;
    }
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Selected search results item
 */

.search__results-item[data-selected=true] {
    background-color: var(--search-item-active-bg);
    border-color: var(--search-item-active-bordrer-color);
}