.sidebar-overlay {
  background: $white;
  opacity: 0;
  position: fixed;
  visibility: hidden;
  z-index: 9999;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  &.active {
    opacity: 0.3;
    visibility: visible;
  }
}

.sidebar {
  background-color: $white;
  border: none;
  display: block;
  position: relative;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  @include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
  @include clearfix();

  .sidebar-divider, .divider {
    width: 80%;
    height: 1px;
    margin: 8px auto;
    background-color: #D7D7D7;
  }

  .sidebar-header {
    position: relative;
    margin-bottom: 16px;
  }

  .sidebar-image {
    background: image-url('logo-text.svg') 0 0 no-repeat;
    display: block;
    margin: 24px auto 14px auto;
    height: 56px;
    width: 153px;
  }

  .sidebar-nav {
    margin: 0;
    padding: 0;
    text-align: center;

    li {
      position: relative;
      list-style-type: none;
      text-align: center;

      a {
        color: $sidebar-link-color;
        position: relative;
        cursor: pointer;
        user-select: none;
        font-family: $font-family-open-sans;
        font-weight: $font-weight-reg;
        font-size: $sidebar-font-size;

        &:hover, &:focus, &:active {
          background: transparent;
          color: $sidebar-link-color-hover;
          outline: 0;
          text-decoration: none;

          svg {
            fill: $sidebar-link-color-hover;
          }
        }

        svg {
          fill: $sidebar-link-color;
          top: 2px;
          width: 14px;
          height: 14px;
          margin-bottom: -2px;
          margin-right: 4px;
        }
      }
    }
  }
}

.sidebar {
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.15);
  position: fixed;
  width: 0;
  z-index: 10000;

  top: 0;
  bottom: 0;
  right: 0;

  &.open {
    width: 280px;
  }
}