$menu-item-border-botton-color:#484848;

.sipsd-sidebar-host {
  width: 100%;
  height: 100%;

  /deep/ {
    * {
      box-sizing: border-box;
    }
  }
}

.sipsd-sidebar {
  height: 100%;
  transition-property: width;
  transition-duration: .55s;
  background-color: #3d3d3d;
}

.menu-extra-info {
  border-bottom: 1px solid $menu-item-border-botton-color;
}

.menu-toggle {
  height: 50px;
  line-height: 50px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid $menu-item-border-botton-color;

  a {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-left: 11px;
    background: #333;
    border-radius: 2px;
    font-size: 21px;
    color: #b1b1b1;
  }
}

.menu-content {
  width: 100%;
}

.menu-list {
  height: 100%;

  /deep/ {
    .ps__rail-y {
      width: 7px;

      &:hover,
      &:focus,
      &.ps--clicking {
        background-color: transparent;

        .ps__thumb-y {
          width: 3px;
        }
      }
    }

    .ps__thumb-y {
      width: 3px;
    }
  }
}