.sidebar {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  left: 0;
  top: 0;
  background: desaturate(lighten($blue1, 35%), 20%);
  z-index: 700;
  position: fixed;
  overflow-y: scroll;
  border-right: 1px solid lighten($blue1, 35%);

  a {
    @include transition;

    .ripple {
      margin: auto 0;
      display: inline-block;

      span {
        display: block;
        margin: 0 auto 0;
        background: $blue3;
        width: 10%;
        opacity: 0;
        height: 3px;
        @include transition;
      }
    }

    &:hover .ripple span {
      width: 100%;
      opacity: 1;
    }
  }

  h1 {
    margin: 0;
    padding: 0;
    text-transform: none;

    a {
      display: block;
      width: 100%;
      padding: 0.333em 2.25rem;
      background-color: white;
      text-align: left;

      img,
      svg {
        display: block;
        fill: currentColor;
        @include transition;
      }

      span {
        top: 1em;
        position: absolute;
        font-size: 1.5rem;
        color: $blue3;
        left: 6.5rem;
        letter-spacing: -0.125rem;
        @include klinicReg;
      }

      &:hover {
        background: $light2;

        svg {
          color: white !important;
        }
      }
    }
  }

  ul {
    margin: 3.667em auto 2em;
    padding: 0;

    li {
      a {
        display: block;
        padding: 0em 15% 0.25em;
        color: $grey3;
        letter-spacing: 0.035em;
        line-height: 1.4;
        text-transform: capitalize;
        font-size: 1.5em;
        @include klinicBold;
        letter-spacing: 0.02em;
        @include transition(all, 0.3s, cubic-bezier(0.25,0.1,0.25,1));

        &:hover {
          color: $blue4;
          background: lighten($blue3, 37.5%);
        }

        &.active {
          color: $blue4;
          background: transparent;

          .ripple span {
            width: 100%;
            opacity: 1;
            background: lighten($blue3, 12.5%);
          }

          &:hover .ripple span {
            background: $blue3;
          }

          & + ul {
            display: block;
          }
        }
      }

      &:last-child {
        a.sidebar-nav-item:after {
          content: '\f08e';
          font-family: "FontAwesome";
          display: inline-block;
          padding-left: 0.5em;
          width: 1em;
          height: 1em;
          color: $blue1;
          font-size: $scalex4;
          opacity: 0.5;
        }
      }

      ul {
        margin: 0;
        padding: 0.5em 0 1.25em;
        display: none;

        li {
          margin: 0;

          a {
            padding: 0.25em 0 0.25em 17.5%;
            line-height: 1;
            font-size: $scalex3;
            border-right: 4px solid transparent;
            color: $blue1;
            @include transition;
            font-family: $base;
            font-weight: bold;

            &:hover {
              color: $blue4;
              background: lighten($blue3, 37.5%);
            }
          }

          &.active a {
            color: $blue4;
            border-right: 4px solid $blue4;
            background: desaturate(lighten($blue1, 39.5%), 20%);
          }
        }
      }
    }
  }

  .sidebar-buttons {
    border-top: 2px solid $light2;
    background: desaturate(lighten($blue1, 35%), 20%);

    .button-wrap {
      width: 300px;
      padding: 0.5em 10% 0.5em;
    }

    .button.expand.small {
      margin: 0.333em 0;
      display: block;
      padding-top: .5rem;
      padding-bottom: .575rem;
      background-color: $light2;
      color: $blue3;

      i {
        margin: -0.05em 0.5em 0 -0.667em;
        color: $blue3;
        font-size: $scalex3;
      }
    }
  }
}

.left-off-canvas-toggle .fa {
  &:before {
    color: $blue3;
  }
  background-color: white;
}
