@use "sass:color";

// NAV-1
nav.navbar-1 {
  box-shadow: 1px 1px 1px #d8d9da;
  position: fixed;
  width: 100%;
  height: 4rem;
  z-index: 1000;

  .nav-container {
    width: 90%;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: auto;

    &a {
      text-decoration: none;
    }

    .logo {
      font-size: 1.2rem;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      & img {
        max-height: 3.5rem;
        width: auto;
      }

      &:hover {
        padding: 0.1rem;
        color: #8e8e8e;
        transition: all 0.3s ease;
      }
    }

    .nav-items {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      transition: all 0.3s ease;
      & span {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
      }
      & span i {
        display: none;
      }
    }

    .hamburger {
      display: none;
      position: fixed;
      top: 1rem;
      font-size: 1.5rem;
      right: 5%;
    }
  }
  .bg-dark {
    position: fixed;
    left: -100%;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #00000098;
  }

  /* JSU */
  .navAnimation {
    display: flex !important;
    animation: toggleNav 0.3s ease;
    transition: all 0.3s ease;
  }
  .navExitAnimation {
    display: flex !important;
    right: -100% !important;
    transition: all 0.3s ease;
  }
  .bgDarkAnimation {
    left: 0;
    display: flex !important;
    animation: bgDarkAnimation 0.3s ease;
    transition: all 0.3s ease;
  }
  .bgDarkExitAnimation {
    left: 100%;
    transition: all 0.3s ease;
  }
  @keyframes toggleNav {
    0% {
      right: -50%;
    }
    100% {
      right: 0;
    }
  }
  @keyframes bgDarkAnimation {
    0% {
      left: 100%;
    }
    100% {
      left: 0%;
    }
  }

  .nav-items a {
    font-size: 1.1rem;
    transition: all 0.3s;
  }

  .nav-items a:hover {
    color: #784343;
    text-decoration: underline;
    text-underline-offset: 5px;
    transition: all 0.3s;
  }
}

@media screen and (max-width: 768px) {
  nav.navbar-1 .nav-container {
    .nav-items span i {
      display: block;
    }

    .nav-items {
      display: none;
      position: fixed;
      top: 4rem;
      right: 0;
      min-width: 10rem;
      max-width: 80%;
      height: 100vh;
      padding-left: 2rem;
      padding-top: 2rem;
      padding-right: 5%;
      justify-content: flex-start;
      align-items: flex-end;
      flex-direction: column;
      overflow: auto;
      box-shadow: -2px 2px 2px #00000057;
      z-index: 1001;
    }

    .hamburger {
      display: block;
      position: fixed;
      top: 1rem;
      right: 5%;
    }

    .hamburger button {
      width: 1.5rem;
      aspect-ratio: 1;
    }

    .hamburger i {
      font-size: 1rem;
    }
  }
}