// @import 'Burger';

header {
  position: fixed;
  width: 100%;
  right: 0;
  left: 0;
  top: 0;
  box-shadow: 0 0 20px rgba(73, 61, 94, 0.09);
  z-index: 10;
  // --scroll: 0%;
  // &:before {
  //   position: absolute;
  //   background: linear-gradient(to right, var(--bg-scroll) var(--scroll), transparent 0);
  //   content: '';
  //   left: 0;
  //   top: 0;
  //   bottom: 0;
  //   right: 0;
  //   z-index: -1;
  // }
}

.nav-bar {
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  &__button-login {
    margin: 0.7rem 0;
    border-radius: 20px;
    border: 2px solid #16dad6;
    background-color: transparent;
    color: #16dad6;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    &:hover {
      background-color: #16dad6;
      color: white;
    }
  }
  .menu {
    top: 0;
  }
  .logo {
    height: 40px;
    min-height: 40px;
  }
  &--navigation {
    // background: blue;
    // display: grid;
    // grid-template-columns: repeat(4, 100px);
    display: flex;
    justify-content: center;
    // align-items: center;
    a {
      color: var(--text-color-bg);
      position: relative;
      font-weight: 400;
      text-align: center;
      transition: font-weight 0.3s ease-in;
      &.nuxt-link-exact-active {
        font-weight: bold;
        // &::before {
        //   width: 100%;
        //   left: 0;
        //   bottom: 102%;
        // }
      }
      @apply px-3 py-2 mr-2;
    }
  }
}

$hamburger-width: 40px;
$hamburger-height: 4px;

.hamburger-icon {
  display: none;
  width: $hamburger-width;
  position: relative;
  height: ($hamburger-width/ 2);
  cursor: pointer;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  &__line {
    position: absolute;
    background-color: #14a0e3;
    display: block;
    width: $hamburger-width;
    height: $hamburger-height;
    left: 0;
    border-radius: ($hamburger-height / 2);
    transition: all 0.3s cubic-bezier(0.25, 0.75, 0.5, 1.25);
    &.top {
      top: 0;
      left: 10px;
      width: 30px;
    }
    &.mid {
      top: 50%;
    }
    &.bottom {
      top: 100%;
    }
  }
  &.active {
    .top {
      width: 40px;
      left: 0;
      transform: translateY(($hamburger-width/4)) rotate(45deg);
    }
    .mid {
      opacity: 0;
    }
    .bottom {
      transform: translateY(-($hamburger-width/4)) rotate(-45deg);
    }
  }
}

/* Animacion #1 */
// .menu-enter-active {
// 	animation: 0.2s down-enter;
// }
// .menu-leave-active {
// 	animation: 0.2s down-leave;
// }

/* Animacion #2 */
// .menu-enter-active {
// 	animation: 0.5s circle-enter;
// }
// .menu-leave-active {
// 	animation: 0.5s circle-leave;
// }

.menu-enter-active,
.menu-leave-active {
  transform: translateX(100%);
}

@keyframes circle-leave {
  0% {
    clip-path: circle(100%);
  }
  100% {
    clip-path: circle(0);
  }
}

@keyframes circle-enter {
  0% {
    clip-path: circle(0);
  }
  100% {
    clip-path: circle(100%);
  }
}

@keyframes down-enter {
  0% {
    clip-path: inset(0 0 0 100%);
  }
  100% {
    clip-path: inset(0);
  }
}

@keyframes down-leave {
  0% {
    clip-path: inset(0);
  }
  100% {
    clip-path: inset(0 100% 0 0);
  }
}

.overlay-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  // background: url('https://images.unsplash.com/photo-1489686995744-f47e995ffe61?ixlib=rb-1.2.1&auto=format&fit=crop&w=2002&q=80');
  // background-size: cover;
  // background-attachment: fixed;
  width: 100%;
  // @include gradient-gen($primary);
  background-color: var(--course-bg);
  transition: all 0.2s;

  &__items {
    display: flex;
    flex-direction: column;
    margin-top: 60px;
    a {
      // background-color: ;
      text-decoration: none;
      color: #14a0e3;
      // margin-bottom: 1rem;
      padding: 1rem 0;
      font-size: 1.2rem;
      text-align: center;
      user-select: none;
      font-weight: 600;
      text-transform: uppercase;
      // background-color: red;
    }
  }
}

@media (max-width: 992px) {
  .nav-bar {
    &--navigation {
      display: none;
    }
  }
  .hamburger-icon {
    display: block;
  }
}