@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 {
    /* Need to force inheritence, otherwise <a> would require overrides for all color states from base styling for element. */
    color: inherit;
    text-decoration: none;

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

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

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