.app-sidebar {
  background: $sidebar-bg;

  width: $sidebar-width;
  flex-shrink: 0;

  position: relative;

  display: flex;
  flex-direction: column;

  .app-sidebar-inner {
    flex: 1;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(white, 0.1);
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(black, 0.5);
    }
  }

  .toggle-sidebar {
    margin-top: auto;
    align-self: flex-start;
    flex-shrink: 0;

    background: $sidebar-toggle-bg;
    color: $sidebar-toggle-color;
    border: none;

    font-size: 24px;
    padding: 10px 20px;
    outline: none;

    opacity: 0.75;

    &:hover {
      opacity: 1.0;
    }

    &:after {
      @extend .fa;
      content: $fa-var-angle-double-left;
    }
  }
}

.app-sidebar-header {
  height: $header-height;
  background: $sidebar-header-bg;

  display: flex;
  align-items: center;

  .navbar-toggle {
    float: left;
    margin-left: $grid-gutter-width / 2;
    padding: 7px 6px;

    border: 1px solid rgba($sidebar-mobile-toggle-color, 0.15);
    border-radius: 4px;

    &:hover {
      background: rgba($sidebar-mobile-toggle-color, 0.05);
    }
  }

  .navbar-brand {
    flex: 1;

    display: flex;
    align-items: center;

    height: 100%;
    padding: 10px 15px;

    font-size: 20px;
    font-weight: 500;
    text-shadow: rgba(black, 0.5) 0 1px 1px;
    color: white;

    img {
      display: inline-block;
      max-height: 100%;
      margin-right: 10px;
    }
  }

  .icon-bar {
    background: $sidebar-mobile-toggle-color;
    width: 26px;
    height: 3px;
  }
}

@include mobile {
  html, body {
    overflow-x: hidden;
  }

  .app-wrapper {
    margin-left: -$sidebar-width;
    margin-right: 0;

    &.animate {
      transition: all $sidebar-transition-duration ease-out;
      transition-property: margin-left, margin-right;
    }
  }

  .mobile-nav-expanded {
    .app-wrapper {
      margin-left: 0;
      margin-right: -$sidebar-width;
    }
  }

  .app-sidebar {
    position: static;

    .toggle-sidebar {
      display: none;
    }
  }

  .app-sidebar-header {
    position: absolute;
    top: 0;
    left: $sidebar-width;
    right: 0;
    z-index: 1;

    .navbar-brand {
      justify-content: center;
      margin-right: 65px;
      padding: 10px 5px;
    }
  }
}

@include tablet {
  .app-sidebar {
    width: $sidebar-width-collapsed;

    .app-sidebar-header {
      text-align: center;

      .navbar-brand {
        padding: 10px 5px;
        justify-content: center;

        img {
          margin: auto;
        }
      }
    }

    .toggle-sidebar:after {
      content: $fa-var-angle-double-right;
    }

    .sidebar-expanded & {
      width: $sidebar-width;

      .app-sidebar-header {
        text-align: left;

        .navbar-brand {
          padding: 10px 15px;
          justify-content: flex-start;

          img {
            margin: 0 10px 0 0;
          }
        }

        .visible-md-inline {
          display: none !important;
        }

        .visible-lg-inline {
          display: block !important;
        }
      }

      .toggle-sidebar:after {
        content: $fa-var-angle-double-left;
      }
    }
  }
}

@include desktop {
  .app-sidebar {
    .sidebar-collapsed & {
      width: $sidebar-width-collapsed;

      .app-sidebar-header {
        text-align: center;

        .navbar-brand {
          padding: 10px 5px;
          justify-content: center;

          img {
            margin: auto;
          }
        }

        .visible-md-inline {
          display: block !important;
        }

        .visible-lg-inline {
          display: none !important;
        }
      }

      .toggle-sidebar:after {
        content: $fa-var-angle-double-right;
      }
    }
  }
}