@use "./mixins" as *;

// adduse
.dx-scrollable-scrollbar-simulated {
  position: relative;
}

.dx-scrollable {
  display: block;
  height: 100%;
  min-height: 0;

  &:focus {
    outline: none;
  }
}

.dx-scrollable-native {
  &.dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-scrollbar {
    display: none;
  }

  &.dx-scrollable-scrollbar-simulated .dx-scrollable-scrollbar {
    display: block;
  }

  &.dx-scrollable-wrapper > .dx-scrollable-container,
  > div.dx-scrollable-wrapper > .dx-scrollable-container {
    position: relative;
    height: 100%;
  }

  &.dx-scrollable-vertical,
  &.dx-scrollable-vertical > .dx-scrollable-wrapper > .dx-scrollable-container {
    touch-action: pan-y;
    overflow-x: hidden;
    overflow-y: auto;
  }

  &.dx-scrollable-horizontal,
  &.dx-scrollable-horizontal > .dx-scrollable-wrapper > .dx-scrollable-container {
    touch-action: pan-x;
    float: none;
    overflow-x: auto;
    overflow-y: hidden;
  }

  &.dx-scrollable-both,
  &.dx-scrollable-both > .dx-scrollable-wrapper > .dx-scrollable-container {
    touch-action: pan-y pan-x;
    float: none;
    overflow-x: auto;
    overflow-y: auto;
  }

  &.dx-scrollable-disabled,
  &.dx-scrollable-disabled .dx-scrollable-container {
    touch-action: auto;
  }

  &.dx-scrollable-scrollbars-hidden > .dx-scrollable-wrapper > .dx-scrollable-container {
    overflow: hidden;
  }

  &.dx-scrollable-native-ios {
    .dx-scrollable-content {
      min-height: 101%;
      box-sizing: content-box;
    }

    &.dx-scrollable-horizontal {
      .dx-scrollable-content {
        min-height: 0;
        padding: 0;
      }
    }
  }

  &.dx-scrollable-native-generic {
    overflow: hidden;

    .dx-scrollable-content {
      height: auto;
    }
  }

  &.dx-scrollable-native-android .dx-scrollable-content {
    transform: none;
    z-index: 0;
  }
}

.dx-scrollable-scrollbar-simulated { // stylelint-disable-line no-duplicate-selectors
  &,
  .dx-scrollable-container {
    ::-webkit-scrollbar {
      display: none;
    }

    scrollbar-width: none;
  }
}

.dx-scrollable-container {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: none;

  &:focus {
    outline: none;
  }
}

.dx-scrollable-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.dx-scrollable-content {
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  transform: none;

  &::after {
    display: block;
    content: "";
    clear: both;
  }
}

.dx-scrollable-horizontal .dx-scrollable-content,
.dx-scrollable-both .dx-scrollable-content {
  display: block;
  float: left;
  min-width: 100%;
}

.dx-scrollable-scrollbar {
  position: absolute;
  pointer-events: auto;
}

.dx-scrollbar-vertical {
  top: 0;
  right: 0;
  height: 100%;

  .dx-scrollable-scroll {
    width: 5px;
  }
}

.dx-scrollbar-horizontal {
  bottom: 0;
  left: 0;
  width: 100%;

  .dx-scrollable-scroll {
    height: 5px;
  }
}

.dx-scrollable-scroll {
  position: relative;
  box-sizing: border-box;
  transform: translate(0, 0);
  background-color: transparent;
  opacity: 1;
  transition: opacity 0s linear, background-color 0s linear;
  overflow: hidden;
  padding: 2px;

  &.dx-state-invisible {
    display: block !important; // stylelint-disable-line declaration-no-important
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.5s linear 1s, background-color 0.5s linear 1s;
  }

  .dx-rtl & {
    direction: rtl;
    float: left;
  }
}

.dx-scrollable-scroll-content {
  width: 100%;
  height: 100%;
}

.dx-rtl .dx-scrollable,
.dx-rtl.dx-scrollable {
  direction: ltr;

  .dx-scrollable-content,
  .dx-scrollable-container {
    direction: ltr;

    @at-root #{selector-append(".dx-scrollable-native", &)} {
      direction: rtl;
    }
  }

  .dx-scrollable-content {
    @at-root #{selector-append(".dx-scrollable-native", &)} {
      float: right;
    }
  }

  .dx-scrollable-content > * {
    direction: rtl;
  }

  .dx-scrollable-scrollbar {
    &.dx-scrollbar-vertical {
      right: auto;
      left: 0;
    }

    &.dx-scrollbar-horizontal {
      direction: ltr;
    }
  }
}

.dx-scrollable-simulated {
  .dx-scrollable-content {
    overflow-anchor: none;
  }

  &.dx-scrollable-disabled {
    .dx-scrollable-scrollbar {
      pointer-events: none;
    }
  }
}