// 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";


$skin-text-01:        #fff;
$skin-text-02:        #d6dbe1;
$skin-text-03:        #8f9dae;
$skin-text-04:        #65768b;

$skin-ui-01:          #546273;
$skin-ui-02:          #3a4450;
$skin-ui-03:          #2d353e;

/***** HEADER *****/

.df-logo {
  color: $skin-text-01;
  span { color: $skin-text-03; }

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

.navbar-header {
  background-color: $skin-ui-03;
  border-bottom-width: 0;

  .burger-menu {
    color: $skin-text-04;

    &:hover,
    &:focus { color: $skin-text-02; }
  }

  .dropdown-menu {
    border-top-width: 0;
    box-shadow: 0 1px 10px 1px rgba($skin-ui-03,.16);
  }

  .dropdown-message,
  .dropdown-notification {
    .dropdown-link {
      color: $skin-text-03;

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

    .dropdown-menu { margin-top: 16.5px; }
  }

  .dropdown-profile {
    .dropdown-link {
      &:hover,
      &:focus {
        .avatar img { background-color: $skin-ui-02; }
      }
    }

    .dropdown-menu {
      @include media-breakpoint-up(lg) {
        margin-top: 14px;
      }
    }

    .dropdown-item {
      width: auto;
      margin: 0 -10px;
      padding: 5px 10px;

      &:hover,
      &:focus {
        background-color: rgba($color-ui-02, .7);
        color: $color-text-02;
      }

      + .dropdown-item { margin-top: 0; }
    }
  }

  .navbar-right {
    .search-link {
      color: $skin-text-03;

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

.navbar-menu-wrapper {
  background-color: lighten($skin-ui-03, 2%);
  @include media-breakpoint-up(lg) { background-color: transparent; }
}

.navbar-menu {
  .nav-label { color: darken($skin-text-04, 8%); }

  .nav-item {
    &.active {
      &.with-sub {
        .nav-link {
          color: #fff;
          &::after { border-color: #fff; }
        }
      }

      .nav-link {
        &::before { background-color: #fff; }
        .feather { color: #fff; }
      }
    }
  }

  .nav-link {
    font-weight: $font-weight-medium;
    color: $skin-text-03;

    .feather { color: $skin-text-04; }

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

.navbar-menu-header {
  background-color: $skin-ui-03;
  border-bottom-color: rgba($color-text-03, .1);

  a:last-child {
    color: rgba($color-text-03, .5);

    &:hover,
    &:focus { color: $color-text-03; }
  }
}

.navbar-menu-sub {
  border-left-color: rgba($skin-ui-01, .3);

  @include media-breakpoint-up(lg) {
    border-top-width: 0;
    border-color: $border-color;
    padding: 15px 15px;
    top: 42px;
    box-shadow: 0 1px 10px 1px rgba($skin-ui-03,.1);

    &::before { opacity: 0; }

    .nav-sub-item {
      + .nav-sub-item { margin-top: 0; }
    }

    ul {
      min-width: 180px;

      + ul {
        margin-left: 15px;
        padding-left: 15px;
      }
    }
  }

  .nav-label {
    color: rgba($color-text-03, .5);

    @include media-breakpoint-up(lg) {
      color: $color-text-03;
      margin-bottom: 10px;
      padding-top: 5px;
      padding-left: 10px;
    }
  }

  .nav-sub-link {
    color: $skin-text-03;

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

    @include media-breakpoint-up(lg) {
      color: $color-text-02;
      padding: 6px 10px;
      @include border-radius();

      &:hover,
      &:focus {
        color: $color-text-02;
        background-color: lighten($color-ui-02, 2%);
      }
    }
  }
}

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

.aside-header {
  background-color: darken($skin-ui-03, 5%);
  border-right-color: transparent;

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

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

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

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

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

.aside-body {
  border-top-color: transparent;
  background-color: $skin-ui-03;
}

.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 $skin-ui-03;
  }
}

.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: rgba(#fff, .8);
          svg { color: rgba(#fff, .8); }
          &::before { border-left-color: rgba(#fff, .8); }
        }
      }

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

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

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

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

    svg {
      color: lighten($skin-ui-01, 10%);
      stroke-width: 1.7px;
    }

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

.content-header {
  @include media-breakpoint-down(md) {
    background-color: $skin-ui-03;
    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; }
  }
}