@mantine/core/styles/Scroller.layer.css

React components library focused on usability, accessibility and developer experience

@layer mantine {.m_bc8f275 {
  --scroller-control-size: 50px;
  --scroller-background-color: var(--mantine-color-body);

  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.m_ee44dece {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
}

.m_ee44dece::-webkit-scrollbar {
    display: none;
  }

.m_ee44dece[data-draggable] {
    cursor: grab;
  }

.m_53e4f606 {
  display: inline-flex;
  white-space: nowrap;
}

.m_47754fc8 {
  width: var(--scroller-control-size);
  height: var(--scroller-control-size);
}

.m_53e526ea {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--scroller-control-size);
  z-index: 1;
  color: var(--mantine-color-dimmed);
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 200ms ease,
    color 150ms ease;
}

.m_53e526ea:hover {
    color: var(--mantine-color-text);
  }

.m_53e526ea:where([data-position='start']) {
    inset-inline-start: 0;
    background: linear-gradient(to right, var(--scroller-background-color) 40%, transparent);
    justify-content: flex-start;
  }

.m_53e526ea:where([data-position='start']) .m_47754fc8 {
      transform: rotate(90deg);
    }

.m_53e526ea:where([data-position='end']) {
    inset-inline-end: 0;
    background: linear-gradient(to left, var(--scroller-background-color) 40%, transparent);
    justify-content: flex-end;
  }

.m_53e526ea:where([data-position='end']) .m_47754fc8 {
      transform: rotate(-90deg);
    }

.m_53e526ea:where([data-hidden]) {
    opacity: 0;
    pointer-events: none;
  }
}