@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-medium);
    align-self: center;
    margin: 0;

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

.menu {
    .item {
        // Need to force inheritance, 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);
    }

    .item:hover,
    .dropdown:hover .item {
        transform: var(--transform-scale-x);
        transition: var(--transition-cut);

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

@media (max-width: 600px) {
    .menu {
        .item {
            padding: var(--padding-mobile);
            background-color: var(--background-1);
        }

        .item:hover,
        .dropdown:hover .item {
            transform: none;
        }
    }
}
