@use "../utilities";

.styleTransparent {
  /* From https://css.glass */
  /*background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);*/
  background-color: #002339;
  border: 1px solid rgba(0, 0, 0, 0.3);
  .navbarTop[data-h-3483] {
    .navbarCustom {
      &,
      /*a {
        color: var(--a-blanco);
        text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6);
      }*/
      img[data-language="white"] {
        display: block;
      }
      .selectElement::after {
        background-image: url("/assets/img/selectWhite.svg");
      }
    }
  }
  .megaMenu[data-n-3583] {
    background-color: transparent;
    //border-top: solid 0.5px rgba($color: #ffffff, $alpha: 0.41);
    // border-bottom: solid 0.5px rgba($color: #ffffff, $alpha: 0.41);

    .navbar-toggler {
      .hamburger-inner,
      .hamburger-inner::before,
      .hamburger-inner::after {
        background-color: #fff;
      }
    }

    img[data-logo="white"] {
      display: block !important;
    }
    .nav-link {
      color: var(--a-blanco);
      text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6);
    }
    .nav-item.bg-Blue {
      a {
        text-shadow: none;
      }
    }
    .nav-item.bg-Orange {
      a {
        text-shadow: none;
      }
    }
    .nav-item.bg-Pink {
      a {
        text-shadow: none;
      }
    }
  }
}
.textshadow_menu {
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6);
}
.styleWhite,
.activeNavbarWhite,
.activeNavbarBlue {
  .navbarTop[data-h-3483] {
    .navbarCustom {
      background-color: var(--navy);
      &,
      a {
        color: #fff;
      }
      img[data-language="blue"] {
        display: block;
      }
      .selectElement::after {
        background-image: url("/assets/img/select.svg");
      }
    }
  }
}

.styleWhite,
.activeNavbarWhite {
  .megaMenu[data-n-3583] {
    .navbarCustom {
      background-color: var(--navy);
      img[data-logo="blue"] {
        display: block !important;
      }
      .nav-link {
        color: var(--a-blanco);
      }
    }
    .navbar-toggler {
      .hamburger-inner,
      .hamburger-inner::before,
      .hamburger-inner::after {
        background-color: var(--a-azul-unops);
      }
    }
  }
}

.styleWhite,
.styleTransparent,
.activeNavbarBlue,
.activeNavbarWhite {
  .submenuDropdown {
    .groupsTitle,
    .groupLinks a,
    .groupLinks {
      @extend %VFSans-font;
      font-weight: 600;
      font-size: 14px;
    }
    .groupsTitle {
      letter-spacing: 1px;
    }
    .groupLinks {
      &__item {
        pointer-events: none;
        &--link {
          pointer-events: auto;
        }
        &:hover {
          &::before {
            content: "\2022";
            font-size: 14px;
            font-weight: 600;
            display: inline-block;
            width: 1em;
            margin-left: -1em;
          }
        }
      }
    }
  }
}

.activeNavbarBlue {
  .megaMenu[data-n-3583] {
    .navbarCustom {
      background-color: var(--b-medianoche);
      border: 0px;
      img[data-logo="white"] {
        display: block !important;
      }

      .activeMenu {
        border-top: solid 0.5px rgba($color: #ffffff, $alpha: 0.41);
      }
      .submenuDropdown {
        .groupsTitle {
          color: var(--b-oc-ano);
          border-bottom: solid 0.5px rgba($color: #fff, $alpha: 0.41);
        }
        .groupLinks {
          &__item {
            &:hover {
              .groupLinks__item--link {
                color: var(--f-arena) !important;
              }
              &::before {
                color: var(--f-arena);
              }
            }
          }
        }
      }
    }
  }
}

.activeNavbarWhite {
  .megaMenu[data-n-3583] {
    .navbarCustom {
      background-color: var(--a-blanco) !important;
      border: 0px;

      .activeMenu {
        border-top: solid 0.5px rgba($color: #000, $alpha: 0.41);
        background-color: var(--a-blanco) !important;
      }
      .submenuDropdown {
        .groupsTitle {
          color: var(--a-azul-unops);
          border-bottom: solid 0.5px rgba($color: #004976, $alpha: 0.41);
        }
        .groupLinks {
          &__item {
            &--link {
              color: var(--b-medianoche) !important;
            }
            &:hover {
              .groupLinks__item--link {
                color: var(--yellow-orange) !important;
              }
              &::before {
                color: var(--yellow-orange);
              }
            }
          }
        }
      }
    }
  }
}