.menu-item {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

    .menu-item.inactive {
        cursor: auto;
    }

.menu-item p{
    font-weight: 600;
    user-select: none;
}

    .menu-item .icon-mask {
        --icon-width: 20px;
        --icon-height: 20px;
        --icon-color: rgb(var(--color-neutral-700-rgb));
    }


    /* ===== MAIN ===== */
    .menu-item.main {
        padding: var(--size-spacing-8);
        background-color: var(--color-mask-shade-0);
        gap: var(--size-spacing-8);
        border-radius: var(--size-radius-base);
        transition: background-color var(--transition-medium);
    }

        .menu-item.main p {
            color: rgb(var(--color-neutral-700-rgb));
        }

        .menu-item.main.active:hover {
            background-color: var(--color-mask-shade-5);
        }

        .menu-item.main.active:active {
            background-color: var(--color-mask-shade-10);
        }

        .menu-item.main.active.pressed {
            background-color: rgb(var(--color-neutral-700-rgb));
        }

            .menu-item.main.active.pressed .icon-mask {
                --icon-color: rgb(var(--color-neutral-0-rgb));
            }

            .menu-item.main.active.pressed p {
                color: rgb(var(--color-neutral-0-rgb));
            }

        .menu-item.main.inactive p {
            color: rgb(var(--color-neutral-300-rgb));
        }

        .menu-item.main.inactive .icon-mask {
            --icon-color: rgb(var(--color-neutral-300-rgb));
        }

/* ===== CONFIGURATION MANAGER ===== */

    .menu-item.configuration-manager {
        padding: var(--size-spacing-8);
        background-color: var(--color-mask-shade-0);
        gap: var(--size-spacing-8);
        border-radius: var(--size-radius-base);
        transition: background-color var(--transition-medium);
    }

        .menu-item.configuration-manager .icon-mask {
            --icon-width: 20px;
            --icon-height: 20px;
        }

        .menu-item.configuration-manager p {
            color: rgb(var(--color-neutral-700-rgb));
        }

        .menu-item.configuration-manager.active:hover {
            background-color: var(--color-mask-shade-5);
        }

        .menu-item.configuration-manager.active:active,
        .menu-item.configuration-manager.active.pressed {
            background-color: var(--color-mask-shade-10);
        }

        .menu-item.configuration-manager.inactive p {
            color: rgb(var(--color-neutral-300-rgb));
        }

        .menu-item.configuration-manager.inactive .icon-mask {
            --icon-color: rgb(var(--color-neutral-300-rgb));
        }