/* =========================
   ROOT MENU
========================= */
.fluent-menu {
    display: flex;
    align-items: center;
    gap: var(--ms-space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ITEM */
.fluent-menu__item {
    position: relative;
}

/* LINK */
.fluent-menu__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;
    border-radius: var(--ms-radius-sm);

    font-size: 14px;
    font-weight: var(--ms-font-weight-medium);

    color: var(--ms-color-text-primary);
    text-decoration: none;

    transition: background var(--ms-motion-fast);
}

/* HOVER */
.fluent-menu__link:hover {
    background: var(--ms-color-neutral-100);
}

/* ACTIVE */
.fluent-menu__link.is-active {
    background: var(--ms-color-primary-subtle);
    color: var(--ms-color-primary);
}

/* SUB ACTIVE */
.fluent-menu__link.is-sub-active {
    font-weight: var(--ms-font-weight-semibold);
}

/* CARET */
.fluent-menu__caret {
    display: flex;
    align-items: center;
}

/* =========================
   DROPDOWN
========================= */
.fluent-menu__dropdown {
    position: absolute;
    top: 100%;
    left: 0;

    min-width: 180px;

    background: var(--ms-color-bg-canvas);
    border: 1px solid var(--ms-color-border-subtle);
    border-radius: var(--ms-radius-sm);

    padding: 6px 0;
    margin-top: var(--ms-space-xs);

    list-style: none;

    display: none;

    box-shadow: var(--ms-shadow-4);
}

/* SHOW DROPDOWN */
.fluent-menu__item:hover > .fluent-menu__dropdown {
    display: block;
}

/* SUB MENU (LEVEL > 0) */
.fluent-menu__dropdown .fluent-menu__dropdown {
    top: 0;
    left: 100%;
}

/* CHILD LINK */
.fluent-menu__dropdown .fluent-menu__link {
    width: 100%;
    padding: var(--ms-space-sm) var(--ms-space-md);
    justify-content: space-between;
    white-space: nowrap;
}

/* HOVER CHILD */
.fluent-menu__dropdown .fluent-menu__link:hover {
    background: var(--ms-color-neutral-50);
}

.fluent-menu__dropdown {
    opacity: 0;
    transform: translateY(4px);
    transition: all 120ms ease;
}

.fluent-menu__item:hover > .fluent-menu__dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
}