/* =========================
   FLUENT LIST GROUP
========================= */

.fluent-list-group {
    display: flex;
    flex-direction: column;
}

/* =========================
   ITEM BASE
========================= */

.fluent-list-item {
    display: flex;
    align-items: center;
    gap: var(--ms-space-sm);

    padding: var(--ms-space-sm) var(--ms-space-md);
    border-radius: var(--ms-radius-md);

    background: var(--ms-color-bg-canvas);
    color: var(--ms-color-text-primary);

    text-decoration: none;

    transition:
        background-color var(--ms-motion-fast) var(--ms-ease),
        transform var(--ms-motion-fast) var(--ms-ease);
}

/* =========================
   CLICKABLE STATE
========================= */

.fluent-list-item.is-clickable {
    cursor: pointer;
}

.fluent-list-item.is-clickable:hover {
    background: var(--ms-color-neutral-hover);
}

/* optional pressed feel */
.fluent-list-item.is-clickable:active {
    background: var(--ms-color-bg-active);
}

/* =========================
   ACTIVE STATE
========================= */

.fluent-list-item.is-active {
    background: var(--ms-color-primary-subtle);
    color: var(--ms-color-primary);
}

/* =========================
   ICON
========================= */

.fluent-list-icon {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--ms-color-text-muted);
}

/* =========================
   CONTENT
========================= */

.fluent-list-content {
    flex: 1;
    min-width: 0;
}

.fluent-list-title {
    font-size: var(--ms-font-size-body);
    font-weight: var(--ms-font-weight-medium);
    line-height: var(--ms-line-height-tight);

    color: var(--ms-color-text-primary);
}

.fluent-list-subtitle {
    margin-top: var(--ms-space-2xs);

    font-size: var(--ms-font-size-small);
    line-height: var(--ms-line-height-normal);

    color: var(--ms-color-text-secondary);
}

/* =========================
   RIGHT SLOT
========================= */

.fluent-list-right {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: var(--ms-space-xs);
}

/* =========================
   FOCUS (ACCESSIBILITY)
========================= */

.fluent-list-item:focus-visible {
    outline: var(--ms-focus-ring-width) solid var(--ms-focus-ring-color);
    outline-offset: var(--ms-focus-ring-offset);
}

/* =========================
   DIVIDER MODE
========================= */

.fluent-list-group.has-divider .fluent-list-item {
    border-bottom: 1px solid var(--ms-color-border-subtle);
}

.fluent-list-group.has-divider .fluent-list-item:last-child {
    border-bottom: none;
}