.sidebar-component {
  z-index: 1000;
  position: relative;
  height: 100%;
  font: 14px Open Sans;

  ul {
    display: block;
    list-style-type: disc;
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
    padding: 10px 15px 10px 15px;
    position: relative;
  }

  .menu {
    height: 100%;
    background: url(/oa/static/img/sidebar-bg.ea5885c.png) no-repeat;
    background-position: bottom;
    border-right: 10px solid $info;
    width: $sidebar-width;

    .sub-menu {
      display: none;
      position: absolute;
      top: 0;
      left: $sidebar-width - 10px;
      background: url(../../../../static/images/layout/sidebar-bg.png);

      .sub-menu-col {
        float: left;
      }

      @for $i from 1 to 5 {
        &.sub-menu-col-#{$i} {
          width: calc(#{$i} * (#{$sidebar-width} - 10px));
        }
      }
    }

  }

  .menu .menu-item {

    width: $sidebar-width - 10px;
    border-bottom: 1px solid $gray-900;
    height: 48px;
    line-height: 28px;

    a, .fa {
      color: $gray-100;
      position: relative;
      z-index: 1;
    }
    .fa.fa-angle-right {
      position: absolute;
      right: 10px;
      top: 15px;
    }
    .hover {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
      opacity: 0;
      width: 0;
      height: 47px;
      transition: 0.3s ease-out;
      -ms-transition: 0.3s ease-out;
      -o-transition: 0.3s ease-out;
      -moz-transition: 0.3s ease-out;
      -webkit-transition: 0.3s ease-out;
    }
    &:hover {
      a, .fa {
        color: $gray-900;
      }
      .hover {
        width: 100%;
        opacity: 1;
        background: $info;
      }
      .sub-menu {
        display: block;
      }
    }
  }

  .sub-menu .menu-item {
    background: $info;
    border-bottom: 1px solid $gray-600;

    .sub-menu-group-item {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &:hover {
      a, .fa {
        color: $gray-900;
      }
      .hover {
        width: 10px;
        opacity: 1;
        background: rgb(24, 50, 85);
      }
    }
  }

}