@import "../variables";
@import "../mixin";
@import "../buttons/buttons";

/*===========================
  NAVBAR css 
===========================*/
.navbar-toggler:focus {
  box-shadow: none;
}

.mb-100 {
  margin-bottom: 100px;
}

.primary-btn {
  @extend %primary-btn;
}

.primary-btn-outline {
  @extend %primary-btn-outline;
}

/*===== NAVBAR ONE =====*/

.navbar-one {
  background: var(--primary);

  @media #{$md,$xs} {
    padding: 20px 0;
  }

  & .navbar {
    position: relative;
    padding: 0;

    & .navbar-toggler {
      & .toggler-icon {
        width: 30px;
        height: 2px;
        background-color: var(--white);
        margin: 5px 0;
        display: block;
        position: relative;
        @include transition(0.3s);
      }

      &.active {
        & .toggler-icon {
          &:nth-of-type(1) {
            @include transform(rotate(45deg));
            top: 7px;
          }

          &:nth-of-type(2) {
            opacity: 0;
          }

          &:nth-of-type(3) {
            @include transform(rotate(135deg));
            top: -7px;
          }
        }
      }
    }

    & .navbar-collapse {
      @media #{$md, $xs} {
        position: absolute;
        top: 140%;
        left: 0;
        width: 100%;
        background-color: var(--primary);
        z-index: 8;
        padding: 10px 0;
        border-radius: 0 0 5px 5px;
      }
    }

    & .navbar-nav {
      & .nav-item {
        margin: 0 5px;
        position: relative;

        & a {
          font-size: 16px;
          line-height: 24px;
          font-weight: 600;
          padding: 28px 15px;
          color: var(--white);
          text-transform: capitalize;
          position: relative;
          display: flex;
          align-items: center;
          z-index: 0;
          @include transition(0.3s);


          &::before {
            position: absolute;
            content: "";
            left: 0;
            bottom: 0;
            height: 100%;
            width: 0%;
            background-color: var(--white);
            opacity: 0;
            visibility: hidden;
            z-index: -1;
            @include transition(0.3s);
          }

          &.active {
            &::before {
              opacity: 0.1;
              visibility: visible;
              width: 100%;
            }
          }

          &:hover {
            &::before {
              opacity: 0.1;
              visibility: visible;
              width: 100%;
            }
          }

          i {
            font-weight: 700;
            padding-left: 8px;
            font-size: 14px;
          }

          @media #{$md, $xs} {
            padding: 10px 10px;
            display: block;

            &::before {
              border-radius: 5px;
            }
          }
        }

        @media #{$md,$xs} {
          margin-bottom: 5px;

          &:last-child {
            margin-bottom: 0;
          }
        }

        & .sub-menu {
          position: absolute;
          left: 0;
          top: 100%;
          width: 260px;
          background-color: var(--white);
          box-shadow: var(--shadow-4);
          border-radius: 5px;
          opacity: 0;
          visibility: hidden;
          @include transition(0.3s);
          z-index: 99;
          padding: 10px;

          @media #{$md, $xs} {
            position: relative !important;
            width: 100% !important;
            left: 0 !important;
            top: auto !important;
            opacity: 1 !important;
            visibility: visible !important;
            right: auto;
            @include transform(translateX(0%));
            @include transition(none);
            @include box-shadow(none);
            text-align: left;
            border-top: 0;
            height: 0;
          }

          &.collapse:not(.show) {
            height: auto;
            display: block;

            @media #{$md, $xs} {
              height: 0;
              display: none;
            }
          }

          &.show {
            @media #{$md, $xs} {
              height: auto;
            }
          }

          & li {
            position: relative;

            @media #{$md,$xs} {
              a {
                border-radius: 5px !important;
              }
            }

            & a {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 8px 24px;
              font-weight: 500;
              position: relative;
              color: var(--dark);
              @include transition(0.3s);
              z-index: 5;
              text-transform: capitalize;
              border-radius: 5px;

              &:hover {
                background-color: var(--primary);
                color: var(--white);
              }

              &::before {
                display: none;
              }

              @media #{$md,$xs} {
                &:hover {
                  background-color: var(--primary-dark);
                  color: var(--white);
                }

                i {
                  color: var(--primary-dark);
                  @include transition(0.3s);
                }

                &:hover {
                  i {
                    color: var(--white);
                  }
                }

              }

              & i {
                font-size: 14px;
                font-weight: 700;

                @media #{$md, $xs} {
                  display: none;
                }
              }

              & .sub-nav-toggler {
                & i {
                  display: inline-block;
                }
              }
            }

            & .sub-menu {
              right: auto;
              left: 100%;
              top: 0;
              opacity: 0;
              visibility: hidden;
              @include transition(0.3s);

              @media #{$laptop,$desktop} {
                margin-left: 10px;
              }

              @media #{$md, $xs} {
                padding-left: 30px;
                height: 0;
              }

              &.show {
                @media #{$md, $xs} {
                  visibility: visible;
                  height: auto;
                  position: relative;
                }
              }
            }

            &:hover {
              & .sub-menu {
                opacity: 1;
                visibility: visible;
                height: auto;
              }
            }
          }
        }

        &:hover {
          & .sub-menu {
            opacity: 1;
            visibility: visible;
            height: auto;
          }
        }

        .sub-nav-toggler {
          @media #{$md, $xs} {
            display: inline-block;
            position: absolute;
            top: 0;
            right: 0;
            padding: 10px 14px;
            font-size: 16px;
            background: none;
            border: 0;
            color: var(--white);
          }
        }
      }
    }

    & .navbar-btn {
      @media #{$md} {
        position: absolute;
        right: 70px;
        top: 3px;
      }

      @media #{$xs} {
        position: absolute;
        right: 60px;
        top: 3px;
      }

      & ul {
        display: flex;

        & li {
          display: inline-block;
          margin-right: 12px;

          & a {
            font-weight: 600;
            text-transform: capitalize;
            letter-spacing: 0;

            &.primary-btn-outline {
              border-color: var(--white);
              color: var(--white);

              &:hover {
                background-color: var(--white);
                color: var(--primary);
              }
            }

            &.primary-btn {
              background-color: var(--white);
              color: var(--primary);
              border-color: var(--white);

              &:hover {
                background-color: transparent;
                color: var(--white);
              }
            }
          }
        }
      }
    }
  }
}