.custom-scrollbar {
  &--arrow-fade {
    .mCustomScrollBox {
      &:before,
      &:after {
        content: "";
        position: absolute;
        top: 0;
        width: 50px;
        height: 100%;
        background: rgb(153, 153, 153);
        z-index: 9;
        opacity: 0;
      }

      &:before {
        left: 0;
        background: linear-gradient(
          90deg,
          rgba(153, 153, 153, 1) 0%,
          rgba(153, 153, 153, 0.9108018207282913) 60%,
          rgba(153, 153, 153, 0) 100%
        );
      }

      &:after {
        right: 0;
        background: linear-gradient(
          90deg,
          rgba(255, 255, 255, 0) 0%,
          rgba(153, 153, 153, 0.8) 40%,
          rgba(153, 153, 153, 1) 100%
        );
      }

      .mCSB_buttonLeft,
      .mCSB_buttonRight {
        opacity: 0;
        background-size: 9px;
        background-position: center;
        background-image: url("#{$pathImgIcons}icon_chevron-right.svg");
        display: none !important;
      }

      .mCSB_buttonLeft {
        transform: scaleX(-1);
      }

      &.mCSB_horizontal {
        &.mCSB_inside {
          .mCSB_container {
            margin-bottom: 0;
            z-index: 1;
          }
        }
      }
      .mCSB_scrollTools {
        &.mCSB_scrollTools_horizontal {
          //   z-index: 10;
          height: 100%;

          .mCSB_draggerContainer {
            display: none;
          }
        }
      }
    }
  }

  &--thick {
    .mCSB_scrollTools {
      width: 17px;

      .mCSB_dragger .mCSB_dragger_bar {
        width: 7px;
        background-color: rgba(0, 0, 0, 0.35);
      }
    }
  }

  &--sm {
    .mCustomScrollBox {
      padding-right: 20px;
    }
    .mCSB_draggerRail {
      border-radius: 0px;
    }

    .mCSB_draggerContainer {
      background-color: #f1f1f1;
      width: 10px;

      .mCSB_dragger_bar {
        width: 8px;
        background-color: #000;
      }
    }

    .mCSB_scrollTools {
      transform: translateX(2px);
    }
  }
}

.mCustomScrollbar {
  &.center {
    ~ .header__sub-arrow {
      display: block;
    }
  }
  &.has-started {
    ~ .header__sub-arrow:not(.header__sub-arrow--right) {
      display: none;
    }
  }
  &.has-ended:not(.center) {
    ~ .header__sub-arrow {
      display: block;
    }
    ~ .header__sub-arrow--right {
      display: none;
    }
  }
}

.mCSB_container {
  padding-right: 2px;
}

.mCS_no_scrollbar {
  ~ .header__sub-arrow {
    display: none;
  }
}
