// template and bootstrap override variables
@import "../variables";
@import "../bootstrap/variables";

// template and bootstrap mixins
@import "../mixins";
@import "../bootstrap/mixins";

// bootstrap
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

// Skins
$skin-brand-01:    lighten($color-brand-01, 15%);
$skin-brand-02:    lighten($color-brand-02, 10%);
$skin-text-02:     rgba(#fff, .85);
$skin-text-03:     rgba(#fff, .5);

///// HEADER /////
.navbar-header {
  background-color: $color-brand-02;
  border-bottom-color: transparent;

  .df-logo {
    &,&:hover,&:focus {
      color: #fff;
      font-weight: $font-weight-semibold;

      span { color: $skin-brand-01; }
    }
  }

  .burger-menu {
    color: rgba(#fff, .5);

    &:hover,
    &:focus { color: #fff; }
  }

  .nav-item {
    &.with-sub {
      .nav-link {
        @include media-breakpoint-up(lg) {
          &::after { border-color: rgba(#fff, .7); }

          &:hover,
          &:focus {
            &::after { border-color: $skin-brand-01; }
          }
        }
      }
    }

    &.active {
      .nav-link {
        @include media-breakpoint-up(lg) { color: $skin-brand-01; }
      }

      &.with-sub {
        .nav-link {
          &::after {
            @include media-breakpoint-up(lg) { border-color: $skin-brand-01; }
          }
        }
      }
    }
  }

  .nav-link {
    @include media-breakpoint-up(lg) {
      color: rgba(#fff, .7);

      &:hover,
      &:focus { color: $skin-brand-01; }
    }
  }

  .navbar-menu-sub {
    border-top-color: transparent;
    margin-top: 15px;

    @include media-breakpoint-up(lg) {
      margin-top: 1px;
      box-shadow: 0 0 8px rgba($gray-900, .06);
    }

    &::before { opacity: 0; }
  }

  .navbar-right {
    .search-link {
      color: rgba(#fff, .7);

      &:hover,
      &:focus { color: #fff; }
    }
  }

  .dropdown-notification,
  .dropdown-message {
    .dropdown-link {
      color: rgba(#fff, .7);

      &:hover,
      &:focus { color: #fff; }
    }

    .dropdown-menu {
      margin-top: 19.5px;
      &::before { opacity: 0; }
    }
  }

  .dropdown-profile .dropdown-link {
    &:hover,
    &:focus {
      .avatar img {
        background-color: rgba(#fff, .2);
      }
    }
  }

  .dropdown-menu {
    border-width: 0;
    box-shadow: 0 0 8px 2px rgba($gray-900, .1);
  }

  .btn-social {
    color: rgba(#fff, .5);

    &:hover,
    &:focus { color: #fff; }
  }

  .btn-buy {
    background-color: $color-brand-01;
    color: #fff;
  }
}

.navbar-search-header {
  background-color: $skin-brand-02;
  border-bottom-width: 0;

  .form-control { color: #fff; }
  .btn { color: #fff; }

  .link-03 {
    color: rgba(#fff, .5);

    &:hover,
    &:focus { color: #fff; }
  }
}

.navbar-menu-wrapper {
  background-color: #fff;
  @include media-breakpoint-up(lg) { background-color: transparent; }
}

.navbar-menu-header {
  background-color: $skin-brand-02;

  a:last-child {
    color: rgba(#fff, .3);

    &:hover,
    &:focus {
      color: rgba(#fff, .6);
    }
  }
}

// Aside
.aside.minimize {
  .nav-aside .nav-label + .nav-item::before {
    border-top-color: rgba(#fff, .12);
  }
}

.aside-header {
  background-color: $color-brand-02;
  border-right-color: transparent;

  .burger-menu {
    color: rgba(#fff, .5);

    &:hover,
    &:focus { color: #fff; }
  }
}

.aside-logo {
  &,&:hover,&:focus {
    color: #fff;
    span {
      color: lighten($color-brand-01, 15%);
    }
  }
}

.aside-menu-link {
  color: rgba(#fff, .5);

  &:hover,
  &:focus { color: #fff; }
}

.aside-body {
  border-top-color: transparent;
  background-color: lighten($color-brand-02, 5%);
}

.aside-loggedin-user {
  h6 {
    color: #fff;
    font-weight: $font-weight-medium;
  }

  p { color: rgba(#fff, .5); }

  a {
    color: rgba(#fff, .5);

    &:hover,
    &:focus { color: #fff; }
  }
}

.aside-alert-link a {
  color: rgba(#fff, .5);

  &:hover,
  &:focus { svg { color: #fff; } }

  &.new::before {
    box-shadow: 0 0 0 2px lighten($color-brand-02, 5%);
    background-color: lighten($pink, 12%);
  }
}

.nav-aside {
  .nav-label {
    color: #fff;
    font-weight: $font-weight-medium;
  }

  .nav-item {
    &.active {
      .nav-link {
        color: #fff;

        &::before {
          bottom: 0;
          top: 0;
          border-left-color: rgba(#fff, .7);
          border-left-width: 2px;
          background-color: rgba(#fff, .08);
        }
      }

      svg {
        color: #fff;
        fill: rgba(#fff, .2);
      }
    }

    &.with-sub {
      &.show {
        .nav-link {
          color: lighten($color-brand-01, 35%);
          svg { color: lighten($color-brand-01, 35%); }
          &::before { border-left-color: lighten($color-brand-01, 35%); }
        }
      }

      ul {
        li.active a { color: #fff; }

        a {
          color: rgba(lighten($color-brand-01, 40%), .8);

          &:hover,
          &:focus { color: #fff; }
        }
      }
    }
  }

  .nav-link {
    color: lighten($color-brand-01, 20%);

    svg {
      color: lighten($color-brand-01, 20%);
      stroke-width: 1.7px;
    }

    &:hover,
    &:focus { color: #fff; }
  }
}

.content-header {
  @include media-breakpoint-down(md) {
    background-color: darken($color-brand-01, 10%);
    border-bottom-width: 0;

    .nav-link {
      color: rgba(#fff, .7);

      &:hover,
      &:focus { color: #fff; }
    }
  }
}

.content-search {
  @include media-breakpoint-down(md) {
    svg { color: #fff; }
    .form-control:focus { color: #fff; }
  }
}