/**
 * 이 파일은 아이모듈의 일부입니다. (https://www.imodules.io)
 *
 * 언급 자동완성 목록 스타일을 정의한다.
 *
 * @file /app/resources/styles/Mention.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2026. 10. 3.
 */
ul[data-role='mentions'][popover] {
    position: fixed;
    inset: auto;
    box-sizing: border-box;
    width: 240px;
    max-height: 240px;
    overflow: auto;
    margin: 0;
    padding: var(--im-component-gap-extra-small);
    border: var(--im-component-border-weight) solid var(--im-border-secondary);
    border-radius: var(--im-component-border-radius);
    background: var(--im-bg-primary);
    color: var(--im-text-primary);
    font-size: var(--im-component-font-size-default);
    box-shadow: 0 8px 24px var(--im-border-secondary-alpha);
    list-style: none;

    > li[data-role='option'] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: var(--im-component-gap-small) var(--im-component-gap-default);
        border-radius: var(--im-component-border-radius-inner);
        cursor: pointer;

        &.selected,
        &:hover {
            background: var(--im-selection-tertiary);
        }

        > small {
            color: var(--im-text-secondary);
            font-size: var(--im-font-size-small);
        }
    }
}