# Styles for the root container
root_style = {
    "display": "flex",
    "justify-content": "space-between",
    "align-items": "center",
    "flex-direction": "column",
}

# Styles for the list of menu items
list_style = {
    "position": "relative",
    "display": "flex",
    "justify-content": "center",
    "width": "100%",
    "z-index": "1",
    "background-color": "white",
    "padding": "0",
    "border-radius": "6px",
    "list-style": "none",
    "box-shadow": "0 2px 10px var(--black-a7)",
    "margin": "0",
}

# Styles for each menu item
item_style = {
    # Add styles for each menu item
    "_hover": {
        # Add styles for the hover state of menu items
    }
}

# Styles for the trigger element within each menu item
trigger_style = {
    "padding": "8px 12px",
    "outline": "none",
    "user-select": "none",
    "font-weight": "500",
    "line-height": "1",
    "border-radius": "4px",
    "font-size": "15px",
    "color": "var(--violet-11)",
}

# Styles for the content area associated with each menu item
content_style = {
    "position": "relative",
    "margin-left": "10px",
}

# Styles for the submenu items
sub_style = {
    # Add styles for the submenu items
}

# Styles for the active menu item indicator
indicator_style = {
    # Add styles for the active menu item indicator
}

# Styles for the viewport area
viewport_style = {
    "position": "relative",
    "transform-origin": "top center",
    "width": "100%",
}

# transform-origin: top center;
#   margin-top: 10px;
#   width: 100%;

