@charset "UTF-8";
/**
 * Learning Materials catalog search suggestions CSS owner. Extracted in P15.177.
 */

/* Learning article catalog search suggestions. */
.learning-catalog .learning-catalog-search--enhanced .learning-catalog-search__input-wrap {
    position: relative;
    display: flex;
    flex: 1 1 260px;
    min-width: 180px;
}

.learning-catalog .learning-catalog-search--enhanced .learning-catalog-search__input-wrap .learning-catalog-search__input {
    width: 100%;
    flex: 1 1 auto;
}

.learning-catalog .learning-catalog-search__suggestions {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    max-height: min(360px, 70vh);
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-primary) 18%);
    border-radius: var(--radius-card);
    background: var(--color-bg-card);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}

.learning-catalog .learning-catalog-search__suggestions[hidden] {
    display: none;
}

.learning-catalog .learning-catalog-search__suggestion {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 86%, transparent);
    background: transparent;
    color: var(--color-text-primary);
    text-align: left;
    cursor: pointer;
}

.learning-catalog .learning-catalog-search__suggestion:last-child {
    border-bottom: 0;
}

.learning-catalog .learning-catalog-search__suggestion:hover,
.learning-catalog .learning-catalog-search__suggestion.is-active {
    background: color-mix(in srgb, var(--color-primary-light) 26%, #ffffff);
}

.learning-catalog .learning-catalog-search__suggestion-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.35;
}

.learning-catalog .learning-catalog-search__suggestion-meta {
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    line-height: 1.25;
}

@media (max-width: 767.98px) {
    .learning-catalog .learning-catalog-search--enhanced .learning-catalog-search__input-wrap {
        width: 100%;
        flex: 0 0 auto;
    }

    .learning-catalog .learning-catalog-search__suggestions {
        max-height: 58vh;
    }
}