.navbar {
  width: 100%;
  z-index: 1039;
  background: $navbar-color;

  .photo {
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    vertical-align: middle;
    overflow: hidden;

    img {
      width: 100%;
    }

    &.xl {
      height: 40px;
      width: 40px;
    }
  }

  .navbar-wrapper {
    display: flex;
    align-items: center;
  }

  .navbar-text {
    color: $white;
  }

  .btn {
    margin: 0 5px 0 10px;
  }

  &.fixed-top,
  &.navbar-absolute {
    position: absolute;
    z-index: 1050;
  }

  &.navbar-transparent {
    background: transparent !important;
  }

  &.bg-white {
    .navbar-nav {
      .search-bar.input-group {
        i {
          color: $black;
        }
      }

      .search-bar.input-group .form-control {
        background: rgba($black, 0.1);
        border-radius: 4px;
      }

      a.nav-link {
        color: $black !important;

        p {
          color: $black;
        }
      }
    }

    .navbar-text,
    .navbar-brand {
      color: $black;
    }

    .form-control {
      color: $black !important;
    }

    .form-control::placeholder {
      color: $dark-gray !important;
    }
  }

  &.bg-dark {
    background: $black !important;
  }

  &.bg-primary {
    background-color: $primary !important;
  }

  &.bg-warning {
    background-color: $warning !important;
  }

  &.bg-info {
    background-color: $info !important;
  }

  &.bg-success {
    background-color: darken($success, 10%) !important;
  }

  &.bg-danger {
    background-color: $danger !important;
  }

  .navbar-brand {
    position: relative;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    color: $white;
    margin-left: 17px;
    text-transform: uppercase;
    font-size: $font-paragraph;
  }

  .navbar-toggle button:focus,
  .navbar-toggler {
    outline: none;
  }
}

.navbar-minimize-fixed {
  position: fixed;
  margin-left: 40px;
  margin-top: 14px;
  transition: 0.3s ease;
  color: white;
  z-index: 20;
  opacity: 0;
  transition: 0.2s ease;



  button {
    i {
      font-size: 20px;
    }
  }

  .btn-just-icon {
    cursor: pointer;
    color: $nft-dark !important
  }
}

.notification {
  background: $nft-purple;
  color: $white;
  border-radius: $border-radius-xl;
  height: 20px;
  width: 20px;
  position: absolute;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  top: 5px;
  right: 5px;
  border: 1px solid $nft-purple;
}

.navbar-nav li {
  padding: 0 10px;

  a {
    color: $white;
  }

  // i {
  //   vertical-align: middle;
  //   font-size: 20px;
  // }
}

@include media-breakpoint-down(md) {
  .navbar:not(.fixed-bottom) {
    top: -70px;
  }

  .navbar {
    .container-fluid {
      padding-right: 15px;
      padding-left: 15px;
    }

    .navbar-collapse {
      height: 100vh;

      .input-group {
        margin: 0;
        margin-top: 5px;
      }
    }

    .navbar-nav {
      .btn {
        margin-left: -3px;
        display: flex;

        i {
          margin-right: 12px;
        }

        span {
          margin: 0;
          text-transform: uppercase;
          font-weight: 300;

          &,
          &:hover,
          &:focus,
          &:active,
          &:active:focus {
            color: $black !important;
          }
        }
      }

      a.nav-link {
        i {
          opacity: 1;
          margin-left: 4px;
          margin-right: 5px;
        }

        p {
          display: inline-block;
          text-transform: uppercase;
          margin-left: 7px;
        }
      }

      .modal-search .modal-dialog {
        padding: 0 40px;
      }

      .dropdown {
        margin: 5px 0;

        .nav-link {
          padding-bottom: 0;
        }

        .dropdown-menu {
          .dropdown-item {
            margin-top: 0;
            padding-left: 24px;
          }
        }
      }
    }

    .dropdown.show .dropdown-menu {
      display: block;
    }

    .dropdown .dropdown-menu {
      display: none;

      li a {
        color: $black;
      }
    }

    .dropdown.show .dropdown-menu,
    .dropdown .dropdown-menu {
      background-color: transparent;
      border: 0;
      transition: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      width: auto;
      margin: 0px 1rem;
      padding-top: 0;
      margin-top: 0px;

      &:before {
        display: none;
      }
    }

    .dropdown-menu .dropdown-item:focus,
    .dropdown-menu .dropdown-item:hover {
      color: $white;
    }

    &.bg-white .dropdown-menu .dropdown-item:focus,
    &.bg-white .dropdown-menu .dropdown-item:hover {
      color: $default;
    }

    .navbar-toggler-bar {
      display: block;
      position: relative;
      width: 22px;
      height: 1px;
      border-radius: 1px;
      background: $white;

      &.navbar-kebab {
        height: 3px;
        width: 3px;
        margin-bottom: 5px;
        border-radius: 50%;
      }

      &+.navbar-toggler-bar {
        margin-top: 7px;
      }

      &+.navbar-toggler-bar.navbar-kebab {
        margin-top: 0px;
      }

      &.bar2 {
        width: 17px;
        transition: width 0.2s linear;
      }
    }

    &.bg-white:not(.navbar-transparent) .navbar-toggler-bar {
      background-color: $default;
    }

    & .toggled .navbar-toggler-bar {
      width: 24px;
    }
  }

  .bar1,
  .bar2,
  .bar3 {
    outline: 1px solid transparent;
  }

  .bar1 {
    top: 0px;
    @include bar-animation($topbar-back);
  }

  .bar2 {
    opacity: 1;
  }

  .bar3 {
    bottom: 0px;
    @include bar-animation($bottombar-back);
  }

  .toggled .bar1 {
    top: 6px;
    @include bar-animation($topbar-x);
  }

  .toggled .bar2 {
    opacity: 0;
  }

  .toggled .bar3 {
    bottom: 9px;
    @include bar-animation($bottombar-x);
  }

  @include topbar-x-rotation();
  @include topbar-back-rotation();
  @include bottombar-x-rotation();
  @include bottombar-back-rotation();

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-moz-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .navbar-nav {
    .nav-link {

      i.fa,
      i.tim-icons {
        opacity: 0.5;
      }
    }
  }


}

@include media-breakpoint-down(lg) {
  .navbar .skinny-pointer-sidebar {
    display: none;
  }
}

@include media-breakpoint-up(lg) {
  .navbar-collapse {
    background: none !important;
  }

  .navbar .navbar-toggle {
    display: none;
  }

  .navbar-nav {
    .nav-link {
      &.profile-photo {
        padding: 0;
        margin: 7px $padding-base-horizontal;
      }
    }
  }

  .navbar {
    .caret {
      position: absolute;
      left: 80%;
      top: 55%;
      margin-left: 0;
    }
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: $list-inline-padding;
    padding-left: $list-inline-padding;
  }
}

@include media-breakpoint-down(xs) {
  .navbar[class*='navbar-toggleable-'] .container {
    margin-left: 0;
    margin-right: 0;
  }
}

@include media-breakpoint-between(md, lg) {

  .bar1,
  .bar2,
  .bar3 {
    outline: 1px solid transparent;
  }

  .bar1 {
    top: 0px;
    @include bar-animation($topbar-back);
  }

  .bar2 {
    opacity: 1;
  }

  .bar3 {
    bottom: 0px;
    @include bar-animation($bottombar-back);
  }

  .toggled .bar1 {
    top: 7px;
    @include bar-animation($topbar-x);
  }

  .toggled .bar2 {
    opacity: 0;
  }

  .toggled .bar3 {
    bottom: 9px;
    @include bar-animation($bottombar-x);
  }

  @include topbar-x-rotation();
  @include topbar-back-rotation();
  @include bottombar-x-rotation();
  @include bottombar-back-rotation();

  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @-moz-keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .navbar .navbar-toggler-bar.bar2 {
    width: 17px;
    transition: width 0.2s linear;
  }

  .navbar .navbar-toggler-bar {
    display: block;
    position: relative !important;
    width: 22px;
    height: 1px;
    border-radius: 1px;
    background: $white;
  }

  .navbar .navbar-toggler-bar+.navbar-toggler-bar {
    margin-top: 7px;
  }

  .navbar .navbar-toggle .navbar-toggler {
    display: block;
  }

  .navbar-minimize-fixed {
    display: none;
  }
}