// stylelint-disable selector-max-class, declaration-no-important, selector-max-compound-selectors, function-url-quotes, selector-max-combinators
.sidebar {
  display: flex;
  flex-direction: column;
  padding: $sidebar-padding;
  color: $sidebar-color;
  background: $sidebar-bg;
  @include borders($sidebar-borders);

  .sidebar-close {
    position: absolute;
    right: 0;
    display: none;
    padding: 0 $spacer;
    font-size: 24px;
    font-weight: 800;
    line-height: $navbar-height;
    color: $sidebar-color;
    background: 0;
    border: 0;
    opacity: .8;

    &:hover {
      opacity: 1;
    }
  }

  // Will be added soon
  // .sidebar-brand { }

  .sidebar-header {
    flex: 0 0 $sidebar-header-height;
    padding: $sidebar-header-padding-y $sidebar-header-padding-x;
    text-align: center;
    background: $sidebar-header-bg;
  }

  .sidebar-form .form-control {
    color: $sidebar-form-color;
    background: $sidebar-form-bg;
    border: $sidebar-form-border;

    &::placeholder {
      color: $sidebar-form-placeholder-color;
    }
  }

  .sidebar-nav {
    position: relative;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    @include sidebar-width($sidebar-borders, $sidebar-width);
  }

  .nav {
    @include sidebar-width($sidebar-borders, $sidebar-width);
    flex-direction: column;
    min-height: 100%;
    padding: 0;
  }

  .nav-title {
    padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
    font-size: 80%;
    font-weight: 700;
    color: $sidebar-nav-title-color;
    text-transform: uppercase;
  }

  .nav-divider {
    height: 10px;
  }

  .nav-item {
    position: relative;
    margin: 0;
    transition: background .3s ease-in-out;
  }

  .nav-dropdown-items {
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow-y: hidden;
    transition: max-height .3s ease-in-out;

    .nav-item {
      padding: 0;
      list-style: none;
    }
  }

  .nav-link {
    display: block;
    padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
    color: $sidebar-nav-link-color;
    text-decoration: none;
    background: $sidebar-nav-link-bg;
    @include borders($sidebar-nav-link-borders);
    @if $enable-sidebar-nav-rounded {
      border-radius: $border-radius;
    }

    .nav-icon {
      display: inline-block;
      width: ($font-size-base * 1.25);
      margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
      font-size: $font-size-base;
      color: $sidebar-nav-link-icon-color;
      text-align: center;
    }

    .badge {
      float: right;
      margin-top: 2px;
    }

    &.active {
      color: $sidebar-nav-link-active-color;
      background: $sidebar-nav-link-active-bg;
      @include borders($sidebar-nav-link-active-borders);

      .nav-icon {
        color: $sidebar-nav-link-active-icon-color;
      }
    }

    &:hover {
      color: $sidebar-nav-link-hover-color;
      background: $sidebar-nav-link-hover-bg;
      @include borders($sidebar-nav-link-hover-borders);

      .nav-icon {
        color: $sidebar-nav-link-hover-icon-color;
      }

      &.nav-dropdown-toggle::before {
        background-image: $sidebar-nav-dropdown-indicator-hover;
      }
    }

    &.disabled {
      color: $sidebar-nav-link-disabled-color;
      cursor: $cursor-disabled;
      background: transparent;
      @include borders($sidebar-nav-link-disabled-borders);

      .nav-icon {
        color: $sidebar-nav-link-disabled-icon-color;
      }

      &:hover {
        color: $sidebar-nav-link-disabled-color;
        @include borders($sidebar-nav-link-hover-borders);

        .nav-icon {
          color: $sidebar-nav-link-disabled-icon-color;
        }

        &.nav-dropdown-toggle::before {
          background-image: $sidebar-nav-dropdown-indicator-hover;
        }
      }
    }

    @each $color, $value in $theme-colors {
      &.nav-link-#{$color} {
        background: $value;
        .nav-icon {
          color: rgba(255, 255, 255, .7);
        }
        &:hover {
          background: darken($value, 5%);
          i {
            color: #fff;
          }
        }
      }
    }
  }

  .nav-dropdown-toggle {
    position: relative;

    &::before {
      position: absolute;
      top: 50%;
      right: $sidebar-nav-link-padding-x;
      display: block;
      width: 8px;
      height: 8px;
      padding: 0;
      margin-top: -4px;
      content: "";
      background-image: $sidebar-nav-dropdown-indicator;
      background-repeat: no-repeat;
      background-position: center;
      transition: transform .3s;
    }

    .badge {
      margin-right: 16px;
    }
  }

  .nav-dropdown.open {
    background: $sidebar-nav-dropdown-bg;
    @include borders($sidebar-nav-dropdown-borders);
    @if $enable-sidebar-nav-rounded {
      border-radius: $border-radius;
    }
    > .nav-dropdown-items {
      max-height: 1500px;
    }

    .nav-link {
      color: $sidebar-nav-dropdown-color;
      border-left: 0;

      &.disabled {
        color: $sidebar-nav-link-disabled-color;
        background: transparent;

        &:hover {
          color: $sidebar-nav-link-disabled-color;

          .nav-icon {
            color: $sidebar-nav-link-disabled-icon-color;
          }
        }
      }
    }

    > .nav-dropdown-toggle::before {
      transform: rotate(-90deg);
    }

    .nav-dropdown.open {
      border-left: 0;
    }
  }

  .nav-label {
    display: block;
    padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
    color: $sidebar-nav-title-color;

    &:hover {
      color: $sidebar-color;
      text-decoration: none;
    }

    .nav-icon {
      width: 20px;
      margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
      font-size: 10px;
      color: $sidebar-nav-link-icon-color;
      text-align: center;
      vertical-align: middle;
    }
  }

  @if (lightness( $sidebar-bg ) < 40) {
    .progress {
      background-color: lighten($sidebar-bg, 15%) !important;
    }
  }

  .sidebar-footer {
    flex: 0 0 $sidebar-footer-height;
    padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
    background: $sidebar-footer-bg;
    @include borders($sidebar-footer-borders);
  }

  .sidebar-minimizer {
    position: relative;
    flex: 0 0 $sidebar-minimizer-height;
    cursor: pointer;
    background-color: $sidebar-minimizer-bg;
    border: 0;
    @include borders($sidebar-minimizer-borders);

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      width: $sidebar-minimizer-height;
      height: $sidebar-minimizer-height;
      content: "";
      background-image: $sidebar-minimizer-indicator;
      background-repeat: no-repeat;
      background-position: center;
      background-size: $sidebar-minimizer-height / 4;
      transition: .3s;
    }

    &:focus,
    &.focus {
      outline: 0;
    }

    &:hover {
      background-color: $sidebar-minimizer-hover-bg;
      &::before {
        background-image: $sidebar-minimizer-hover-indicator;
      }
    }
  }
}

@include media-breakpoint-up(lg) {
  .sidebar-compact {
    .sidebar {
      .sidebar-nav {
        @include sidebar-width($sidebar-borders, $sidebar-compact-width);
      }

      .nav {
        @include sidebar-width($sidebar-borders, $sidebar-compact-width);
      }

      .d-compact-none {
        display: none;
      }

      .nav-title {
        text-align: center;
      }

      .nav-item {
        width: $sidebar-compact-width;
        border-left: 0;
      }

      .nav-link {
        text-align: center;

        .nav-icon {
          display: block;
          width: 100%;
          margin: $spacer / 4 0;
          font-size: 24px;
        }

        .badge {
          position: absolute;
          top: 18px;
          right: 10px;
        }

        &.nav-dropdown-toggle {

          &::before {
            top: 30px;
          }
        }
      }
    }
  }

  // Minimized Sidebar
  .sidebar-minimized {
    .sidebar {
      z-index: $zindex-sticky - 1;

      .sidebar-nav {
        overflow: visible;
        @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
      }

      .nav {
        @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
      }

      .d-minimized-none,
      .nav-divider,
      .nav-label,
      .nav-title,
      .sidebar-footer,
      .sidebar-form,
      .sidebar-header {
        display: none;
      }

      // Temporary fix for this issue: https://github.com/coreui/coreui-free-bootstrap-admin-template/issues/404
      // ToDo: find better solution
      .sidebar-minimizer {
        position: fixed;
        bottom: 0;
        width: $sidebar-minimized-width;
        height: $sidebar-minimizer-height;
        background-color: darken($sidebar-bg, 5%);
      }
      // stylelint-disable no-duplicate-selectors
      .sidebar-nav {
        padding-bottom: $sidebar-minimizer-height;
      }
      // Temporary fix end

      .sidebar-minimizer::before {
        width: 100%;
        transform: rotate(-180deg);
      }

      .nav-item {
        width: $sidebar-minimized-width;
        overflow: hidden;

        &:hover {
          width: $sidebar-width + $sidebar-minimized-width;
          overflow: visible;

          > .nav-link {
            background: $sidebar-nav-link-hover-bg;

            .nav-icon {
              color: $sidebar-nav-link-hover-color;
            }

            &.disabled {
              background: $sidebar-nav-link-disabled-bg;

              .nav-icon {
                color: $sidebar-nav-link-disabled-icon-color;
              }
            }
          }
        }
      }

      .nav-link {
        position: relative;
        padding-left: 0;
        margin: 0;
        white-space: nowrap;
        border-left: 0;

        .nav-icon {
          display: block;
          float: left;
          width: $sidebar-minimized-height;
          font-size: 18px;
        }

        .badge {
          position: absolute;
          right: 15px;
          display: none;
        }

        &:hover {
          width: $sidebar-width + $sidebar-minimized-width;
          background: $sidebar-nav-link-hover-bg;

          .badge {
            display: inline;
          }
        }

        &.nav-dropdown-toggle::before {
          display: none;
        }
      }

      .nav-dropdown-items {
        .nav-item {
          width: $sidebar-width;

          .nav-link {
            width: $sidebar-width;
          }
        }
      }

      .nav > .nav-dropdown {
        > .nav-dropdown-items {
          display: none;
          max-height: 1000px;
          background: $sidebar-bg;
        }

        &:hover {
          background: $sidebar-nav-link-hover-bg;
          > .nav-dropdown-items {
            position: absolute;
            left: $sidebar-minimized-width;
            display: inline;
          }
        }
      }
    }
  }

  *[dir="rtl"] {
    .sidebar-minimized {
      .sidebar {
        .nav {
          list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
          .divider {
            height: 0;
          }
        }

        //.d-minimized-none,
        //.nav-divider,
        //.nav-label,
        //.nav-title,
        //.sidebar-footer,
        //.sidebar-form,
        //.sidebar-header {
        //  display: none;
        //}

        .sidebar-minimizer::before {
          width: 100%;
          transform: rotate(0deg);
        }

        .nav-link {
          padding-right: 0;

          .nav-icon {
            float: right;
          }

          .badge {
            right: auto;
            left: 15px;
          }

          &:hover {
            .badge {
              display: inline;
            }
          }
        }

        .nav > .nav-dropdown {
          > .nav-dropdown-items {
            display: none;
            max-height: 1000px;
            background: $sidebar-bg;
          }

          &:hover {
            background: $sidebar-nav-link-hover-bg;
            > .nav-dropdown-items {
              position: absolute;
              left: 0;
              display: inline;
            }
          }
        }
      }
    }
  }
}

*[dir="rtl"] {
  .sidebar {
    .nav-dropdown-toggle::before {
      position: absolute;
      right: auto;
      left: $sidebar-nav-link-padding-x;
      transform: rotate(180deg);
    }

    .nav-dropdown.open {
      > .nav-dropdown-toggle::before {
        transform: rotate(270deg);
      }
    }

    .nav-link {
      .nav-icon {
        margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
      }

      .badge {
        float: left;
        margin-top: 2px;
      }
    }

    .nav-link.nav-dropdown-toggle {
      .badge  {
        margin-right: auto;
        margin-left: 16px;
      }
    }

    .sidebar-minimizer::before {
      right: auto;
      left: 0;
      transform: rotate(180deg);
    }
  }

  // Temp fix for rtl sidebar-toggler
  // ToDo: find better solution
  .sidebar-toggler {
    margin-right: 0 !important;
  }
}