/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
/* Height and width are controlled by props */
.Scroll > .Scroll__Scrollbar {
  max-height: inherit;
  max-width: 100%;
}

/* Height is controlled by container */
.Scroll--height-auto,
.Scroll--height-auto > .Scroll__Scrollbar {
  height: 100%;
}

/* Width is controlled by container */
.Scroll--width-auto,
.Scroll--width-auto > .Scroll__Scrollbar {
  width: 100%;
}

.Scroll__Scrollbar {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  position: relative;
  /* Default behavior */
}
.Scroll--of-x-auto > .Scroll__Scrollbar {
  overflow-x: auto;
}
.Scroll--of-y-auto > .Scroll__Scrollbar {
  overflow-y: auto;
}
.Scroll--of-x-scroll > .Scroll__Scrollbar {
  overflow-x: scroll;
}
.Scroll--of-y-scroll > .Scroll__Scrollbar {
  overflow-y: scroll;
}
.Scroll--of-x-hidden > .Scroll__Scrollbar {
  overflow-x: hidden;
}
.Scroll--of-y-hidden > .Scroll__Scrollbar {
  overflow-y: hidden;
}
.Scroll__Scrollbar:focus {
  outline-color: var(--colorsFocusRingPrimary, #78bbfa);
}
.Scroll__Scrollbar:focus-visible {
  outline-color: var(--colorsFocusRingPrimary, #78bbfa);
}

/* Scrollable without visible scrollbar */
.Scroll--of-x-hidden.Scroll--hidden-scrollbar > .Scroll__Scrollbar {
  overflow-x: scroll;
}

.Scroll--of-y-hidden.Scroll--hidden-scrollbar > .Scroll__Scrollbar {
  overflow-y: scroll;
}

.Scroll--hidden-scrollbar > .Scroll__Shadows,
.Scroll--hidden-scrollbar > .Scroll__Scrollbar {
  scrollbar-width: none;
}
.Scroll--hidden-scrollbar > .Scroll__Shadows::-webkit-scrollbar,
.Scroll--hidden-scrollbar > .Scroll__Scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 0;
  height: 0;
}

.Scroll {
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}
.Scroll .Scroll__Shadows {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  visibility: hidden;
}
.Scroll .Scroll__Shadows > div {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 100ms linear;
  visibility: visible;
  z-index: 10;
}
.Scroll.Scroll--of-y-auto.Scroll--scrollable-top .Scroll__Shadows, .Scroll.Scroll--of-y-auto.Scroll--scrollable-bottom .Scroll__Shadows, .Scroll.Scroll--of-y-scroll.Scroll--scrollable-top .Scroll__Shadows, .Scroll.Scroll--of-y-scroll.Scroll--scrollable-bottom .Scroll__Shadows {
  overflow-y: scroll;
}
.Scroll.Scroll--of-x-auto.Scroll--scrollable-left .Scroll__Shadows, .Scroll.Scroll--of-x-auto.Scroll--scrollable-right .Scroll__Shadows, .Scroll.Scroll--of-x-scroll.Scroll--scrollable-left .Scroll__Shadows, .Scroll.Scroll--of-x-scroll.Scroll--scrollable-right .Scroll__Shadows {
  overflow-x: scroll;
}
.Scroll.Scroll--scrollable-top > .Scroll__Shadows > .Shadow--top, .Scroll.Scroll--scrollable-right > .Scroll__Shadows > .Shadow--right, .Scroll.Scroll--scrollable-bottom > .Scroll__Shadows > .Shadow--bottom, .Scroll.Scroll--scrollable-left > .Scroll__Shadows > .Shadow--left {
  opacity: 1;
  transition: opacity 100ms linear;
}
.Scroll .Scroll__Shadows > .Shadow--top {
  top: 0;
  width: 100%;
  height: 24px;
}
.Scroll .Scroll__Shadows > .Shadow--right {
  right: 0;
  width: 24px;
  height: 100%;
}
.Scroll .Scroll__Shadows > .Shadow--bottom {
  bottom: 0;
  width: 100%;
  height: 24px;
}
.Scroll .Scroll__Shadows > .Shadow--left {
  left: 0;
  width: 24px;
  height: 100%;
}

.Scroll .Scroll__Shadows > .Shadow--right, .Scroll .Scroll__Shadows > .Shadow--left {
  background-repeat: no-repeat;
  background-size: 24px 100%;
}

.Scroll .Scroll__Shadows > .Shadow--top, .Scroll .Scroll__Shadows > .Shadow--bottom {
  background-repeat: no-repeat;
  background-size: 100% 24px;
}

.Scroll .Scroll__Shadows > .Shadow--top {
  background-image: radial-gradient(65% 24px at 50% top, rgba(20, 20, 20, 0.1), transparent);
}

.Scroll .Scroll__Shadows > .Shadow--right {
  background-image: radial-gradient(24px 65% at right 50%, rgba(20, 20, 20, 0.1), transparent);
}

.Scroll .Scroll__Shadows > .Shadow--bottom {
  background-image: radial-gradient(65% 24px at 50% bottom, rgba(20, 20, 20, 0.1), transparent);
}

.Scroll .Scroll__Shadows > .Shadow--left {
  background-image: radial-gradient(24px 65% at left 50%, rgba(20, 20, 20, 0.1), transparent);
}

/*# sourceMappingURL=Scroll.css.map */