.product-filter-sidebar {
  width           : 310px;
  height          : 90vh;
  position        : fixed;
  top             : 10vh;
  left            : 0;
  background-color: rgba(#fff, 0.9);
  z-index         : 2;
  transition      : all 0.3s;
  transform       : translateX(-100%);
  overflow        : auto;
  &::-webkit-scrollbar {
    width: 5px;
  }
  &::-webkit-scrollbar-track {
    background-color: #ebebee;
  }
  &::-webkit-scrollbar-thumb {
    background-color: $main-color;
  }
  scrollbar-width: thin;
  // &:hover {
  //   overflow: auto;
  // }
  &.active {
    transform: translateX(0%);
    // .toggle-product-filter {
    //   transform: translateX(-100%);
    //   position : fixed;
    // }
  }
}

.product-filter-container {
  .product-filter-block  {
    padding: 0 8px;
    margin-bottom: 20px;
    &:first-child {
      margin-top: 30px;
    }
    .title {
      padding: 10px 0;
      font-weight: bold;
      h4 {
        margin-bottom: 0;
      }
      .dropdown-filter-block {
        vertical-align: top;
        cursor: pointer;
      }
    }

    .list-has-checkbox {
      li {
        label {
          margin-bottom: 0;
          cursor: pointer;
          display: block;
          width: 100%;
          user-select: none;
          -moz-user-select: none;
        }
      }
    }
  }

  .product-filter-color {
    .color-sample {
      width         : 20px;
      height        : 20px;
      display       : inline-block;
      margin-left   : 8px;
      vertical-align: middle;
      border-radius : 50%;
    }
  }

  .product-filter-price {

  }

}

.toggle-product-filter {
  width           : 30px;
  height          : 30px;
  background-color: #333;
  color           : #fff;
  display         : flex;
  justify-content : center;
  align-items     : center;
  position        : fixed;
  top             : 10vh;
  left            : 0%;
  cursor          : pointer;
  transition      : all 0.3s;
  transition-delay: 0.4s;
  z-index         : 3;
}