/*
 * This file is part of Osclass (Mindstellar).
 * Copyright (c) 2021-2026 Navjot Tomer (Mindstellar) and contributors
 *
 * Distributed under the GNU General Public License v3.0 or later. See LICENSE.
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

/*
 * Default, overridable styling for the shared Osclass UI widgets (ui-common.js).
 * Cosmetic only: the widgets carry their own structural styles inline, so a theme
 * that ships none of this still works. Colours resolve through --osc-* tokens when
 * present (admin: themed + dark-mode aware) and fall back to a plain light look
 * everywhere else. Theme authors may restyle or replace any of these classes.
 */

.osc-ac-list {
    background-color: var(--osc-bench, #fff);
    border: 1px solid var(--osc-rule, #d9d9d9);
    border-radius: var(--osc-radius, .25rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .06);
    list-style: none;
    max-height: 16rem;
    overflow-y: auto;
    padding: .25rem;
}

.osc-ac-option {
    border-radius: var(--osc-radius-sm, .2rem);
    color: var(--osc-ink, #1d1a17);
    cursor: pointer;
    font-size: .9375rem;
    overflow: hidden;
    padding: .4rem .6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.osc-ac-option:hover,
.osc-ac-option.is-active {
    background-color: var(--osc-bronze-tint, #f1f1f1);
    color: var(--osc-bronze, #8f5d00);
}

.osc-ac-option .osc-suggest-thumb {
    display: inline-block;
    border-radius: var(--osc-radius-sm, .2rem);
    height: 2rem;
    margin-right: .5rem;
    object-fit: cover;
    vertical-align: middle;
    width: 2rem;
}

.osc-ac-option .osc-suggest-count {
    color: var(--osc-ink-muted, #6b6560);
    float: right;
    font-size: .8125rem;
}

.osc-ac-option .osc-suggest-heading {
    color: var(--osc-ink-muted, #6b6560);
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: .25rem;
    text-transform: uppercase;
}

.osc-ac-option .osc-suggest-meta {
    color: var(--osc-ink-muted, #6b6560);
    display: block;
    font-size: .8125rem;
    overflow: hidden;
    text-overflow: ellipsis;
}