@use "nav_dropdown";
@use "nav_title";

.nav_menu {
    /*
    Remove default padding and style applied to ul for bullets.
    */
    padding: 0;
    list-style: none;

    display: grid;
    grid-auto-flow: row;
    gap: var(--spacing-menu-gap);
    align-self: center;
    margin: 0;

    hr {
        border-color: var(--accent-pink);
        margin: 0 var(--spacing-horizontal);
    }

    .nav_body {
        background-color: var(--background-2);
        border-radius: var(--border-radius-small);
        transition: var(--transition-fade);
    }

    .nav_dropdown:hover .nav_body,
    .nav_body:hover {
        transform: var(--transform-scale-x);
        transition: var(--transition-cut);

        .nav_title,
        ion-icon {
            color: var(--highlight-hover);
            transition: var(--transition-cut);
        }
    }
}