@mixin widget_product_categories_with_icon {
  .product-categories-with-icon {
    > li {
      border-bottom: 1px solid;
      margin: 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      cursor: pointer;

      &:last-child {
        border-bottom: 0;
      }

      .dropdown_icon {
        &:before {
          display: flex;
          justify-content: flex-end;
          transition: transform 0.7s;
        }
      }

      &.active-item {
        .dropdown_icon {
          &:before {
            transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
          }
        }
      }

      > ul {
        &.children {
          margin: 0 rem-calc(8) rem-calc(16) rem-calc(40);
          width: 100%;

          &.add_scroll {
            max-height: 200px;
            overflow-y: scroll;
            margin-bottom: rem-calc(24);

            &::-webkit-scrollbar-track {
              border-radius: 3px;
              background: $overlay-opacity-ultra-light;
            }

            &::-webkit-scrollbar {
              width: 2px;
              background: $overlay-opacity-ultra-light;
            }

            &::-webkit-scrollbar-thumb {
              border-radius: 3px;
              background: $overlay-opacity-light;
            }
          }

          li {
            [class^="thehanger-icons-"],
            [class*=" thehanger-icons-"] {
              display: none;
            }
          }
        }
      }

      > a {
        display: flex;
        align-items: center;
        min-height: 4.5em;
        padding-top: 1.2em;
        padding-bottom: 1.2em;
        max-width: 70%;

        i {
          font-size: rem-calc(24);
          padding-right: rem-calc(15);
        }

        img {
          width: rem-calc(24);
          margin-right: rem-calc(15);
        }
      }

      .count {
        margin-left: rem-calc(3);
      }
    }

    > .cat-parent {
      position: relative;

      &.no-icon {
        > .children {
          margin-left: rem-calc(20);
        }
      }

      &.current-cat-parent {
        &.active {
          ul.children {
            display: block;
          }
        }
      }

      .dropdown_icon {
        @include global-transition();
        padding: rem-calc(4);
        font-size: rem-calc(8);
        flex-grow: 1;
        justify-content: flex-end;
        text-align: right;
      }

      .cat-item {
        margin-bottom: rem-calc(5);
      }

      > .children {
        display: none;

        li {
          ul.children {
            margin: rem-calc(8) rem-calc(8) 0 rem-calc(20);
          }
        }
      }
    }
  }
}