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

.nav_menu {
    grid-area: 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-medium);
    align-self: center;
    margin: 0;

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

.nav_item {
    // Need to force inheritence, otherwise <a> would require
    // overrides for all color states from base styling for element.
    color: inherit;
    text-decoration: none;

    padding: 0 var(--spacing-small);

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

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

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

@media only screen and (max-width: 500px) {
    .nav_item {
        padding: var(--padding-mobile);
        background-color: var(--background-1);
    }

    .nav_item:hover,
    .nav_dropdown:hover .nav_item {
        transform: none;
    }
}