@layer kora.components {
    .kora-menu {
        position: relative;
        display: inline-block;
    }

    .kora-menu__trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        background: var(--kora-surface-1);
        color: var(--kora-color-text);
        border: 1px solid var(--kora-color-border);
        border-radius: var(--kora-radius-pill);
        cursor: pointer;
        transition: background-color var(--kora-duration-base) var(--kora-ease);
    }

    .kora-menu__trigger:hover {
        background: var(--kora-surface-2);
    }

    .kora-menu__panel {
        position: absolute;
        top: calc(100% + var(--kora-space-2));
        right: 0;
        min-width: 14rem;
        padding: var(--kora-space-3);
        background: var(--kora-color-surface-raised);
        border: 1px solid var(--kora-color-border);
        border-radius: var(--kora-radius-lg);
        box-shadow: var(--kora-glass-shadow);
        z-index: var(--kora-z-header);
    }

    .kora-menu__heading {
        margin: 0 0 var(--kora-space-2);
        padding: 0 var(--kora-space-2);
        font-size: 0.6875rem;
        font-weight: var(--kora-font-weight-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--kora-color-text-muted);
    }

    .kora-menu__links {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .kora-menu__link {
        display: flex;
        align-items: center;
        padding: var(--kora-space-2) var(--kora-space-3);
        border-radius: var(--kora-radius-md);
        font-family: var(--kora-font-sans);
        font-size: var(--kora-text-sm);
        font-weight: var(--kora-font-weight-medium);
        color: var(--kora-color-text);
        text-decoration: none;
        transition: background-color var(--kora-duration-fast) var(--kora-ease);
    }

    .kora-menu__link:hover {
        background: var(--kora-surface-2);
    }

    .kora-menu__link--icon {
        width: fit-content;
        color: var(--kora-color-text-muted);
    }

    .kora-menu__link--icon:hover {
        color: var(--kora-color-text);
    }
}