@mixin dx-scrollable-scroll-content(
  $scrollable-scroll-bg,
) {
  .dx-scrollable-scroll-content {
    background-color: $scrollable-scroll-bg;
  }
}

@mixin dx-scrollable-scrollbar-hoverable(
  $scrollable-scrollbar-bg,
  $scrollable-scrollbar-active-bg,
  $scrollable-scroll-active-bg,
) {
  .dx-scrollbar-hoverable {
    background-color: $scrollable-scrollbar-bg;

    &.dx-state-hover,
    &.dx-scrollable-scrollbar-active {
      background-color: $scrollable-scrollbar-active-bg;
    }

    &.dx-scrollable-scrollbar-active .dx-scrollable-scroll-content {
      background-color: $scrollable-scroll-active-bg;
    }

    .dx-scrollable-scroll.dx-state-invisible {
      opacity: 1;

      .dx-scrollable-scroll-content {
        background-color: transparent;
      }
    }
  }
}

@mixin dx-scrollable-scrollbar-vertical(
  $scrollbar-size-thin,
  $scrollbar-size,
  $scrollbar-scroll-boundary-padding,
) {
  .dx-scrollbar-vertical {
    .dx-scrollable-scroll {
      float: right;
      width: $scrollbar-size-thin;
      padding-inline-end: $scrollbar-scroll-boundary-padding;
    }

    &.dx-scrollbar-hoverable {
      width: $scrollbar-size-thin;
      transition: width 0.2s linear 0.15s, background-color 0.2s linear 0.15s;

      .dx-scrollable-scroll {
        transition: background-color 0.5s linear 1s, width 0.2s linear 150ms;

        .dx-scrollable-scroll-content {
          transition: background-color 0.15s linear 0.15s;
        }

        &.dx-state-invisible {
          transition: background-color 0.5s linear 1s, width 0.2s linear 0.15s;

          .dx-scrollable-scroll-content {
            transition: background-color 0.5s linear 1s;
          }
        }
      }

      &.dx-state-hover,
      &.dx-scrollable-scrollbar-active {
        width: $scrollbar-size;

        .dx-scrollable-scroll {
          width: $scrollbar-size;
        }
      }
    }
  }
}

@mixin dx-scrollable-scrollbar-horizontal(
  $scrollbar-size-thin,
  $scrollbar-size,
  $scrollbar-scroll-boundary-padding,
) {
  .dx-scrollbar-horizontal {
    .dx-scrollable-scroll {
      height: $scrollbar-size-thin;
      padding-bottom: $scrollbar-scroll-boundary-padding;
    }

    &.dx-scrollbar-hoverable {
      height: $scrollbar-size-thin;
      transition: height 0.2s linear 0.15s, background-color 0.2s linear 0.15s;

      .dx-scrollable-scroll {
        transition: background-color 0.5s linear 1s, height 0.2s linear 0.15s;

        .dx-scrollable-scroll-content {
          transition: background-color 0.15s linear 0.15s;
        }

        &.dx-state-invisible {
          transition: background-color 0.5s linear 1s, height 0.2s linear 0.15s;

          .dx-scrollable-scroll-content {
            transition: background-color 0.5s linear 1s;
          }
        }
      }

      &.dx-state-hover,
      &.dx-scrollable-scrollbar-active {
        height: $scrollbar-size;

        .dx-scrollable-scroll {
          height: $scrollbar-size;
        }
      }
    }
  }
}

@mixin dx-scrollable-scrollbars-alwaysvisible(
  $scrollbar-size-thin
) {
  .dx-scrollable-scrollbars-alwaysvisible {
    &.dx-scrollable-vertical,
    &.dx-scrollable-both {
      > .dx-scrollable-wrapper {
        > .dx-scrollable-container {
          > .dx-scrollable-content {
            padding-right: $scrollbar-size-thin;
          }
        }
      }

      &.dx-rtl,
      .dx-rtl & {
        > .dx-scrollable-wrapper {
          > .dx-scrollable-container {
            > .dx-scrollable-content {
              padding-right: 0;
              padding-left: $scrollbar-size-thin;
            }
          }
        }
      }
    }

    &.dx-scrollable-horizontal,
    &.dx-scrollable-both {
      > .dx-scrollable-wrapper {
        > .dx-scrollable-container {
          > .dx-scrollable-content {
            padding-bottom: $scrollbar-size-thin;
          }
        }
      }
    }
  }
}