@use '../../../base/variables' as v;

.nav {
    background: v.$negro;
    font-size: 2rem;
}

.nav__menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__item {
    position: relative; /* CLAVE */
}

.nav__item a {
    display: block;
    padding: 1rem 1.5rem;
    color: v.$blanco;
    text-decoration: none;
}

/* SUBMENÚ */
.nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: v.$negro;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 18rem;
    
    max-height: 40rem;  
    overflow-y: auto;   
    display: none;
}

/* Mostrar al hover */
.nav__item--dropdown:hover .nav__submenu {
    display: block;
}

.nav__submenu li a {
    padding: 0.8rem 1rem;
}

.nav__submenu li a:hover {
    background: v.$negro-claro;
}
