.ui-menu {
    position: relative;
    display: inline-flex;
}

.ui-menu-trigger {
    display: inline-flex;
}

.ui-menu-content {
    position: fixed;
    z-index: var(--z-modal);
    top: var(--ui-menu-top, 0);
    left: var(--ui-menu-left, 0);
    min-width: 12rem;
    max-height: min(20rem, 60vh);
    overflow-y: auto;
    padding: 0.35rem;
    border: 1px solid var(--divider);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.ui-menu-content[hidden] {
    display: none !important;
}

.ui-menu-content--reka {
    position: relative;
    top: auto;
    left: auto;
    max-width: min(20rem, calc(100vw - 1.25rem));
    max-height: min(20rem, var(--reka-dropdown-menu-content-available-height, 60vh));
}

.ui-menu-separator {
    height: 1px;
    margin: 0.35rem 0.5rem;
    background: var(--divider);
}

.ui-menu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 2.35rem;
    padding: 0.5rem 0.65rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.88rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ui-menu-item:hover,
.ui-menu-item:focus-visible {
    background: var(--primary-50);
    color: var(--primary);
    outline: none;
}

.ui-menu-item--danger {
    color: var(--error-fg);
}

.ui-menu-item--danger:hover,
.ui-menu-item--danger:focus-visible {
    background: var(--error-bg);
    color: var(--error-fg);
}

.ui-menu-item:disabled,
.ui-menu-item[aria-disabled='true'] {
    cursor: not-allowed;
    opacity: 0.5;
}

.ui-menu-item-icon {
    flex: 0 0 auto;
    opacity: 0.78;
}

.ui-menu-item-copy {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.ui-menu-item-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-menu-item-copy small {
    color: currentColor;
    font-size: 0.74rem;
    opacity: 0.72;
}