@use "../vendor/govuk-frontend" as *;

.moj-scrollable-pane {
  // stylelint-disable scss/dollar-variable-pattern
  $scrollableBgColor: govuk-colour("white");
  $scrollableTransparentColor: rgba(255, 255, 255, 0);
  $scrollableShadowColor: rgba(0, 0, 0, 0.2);
  $scrollableShadowSize: 0.75em;
  // stylelint-enable scss/dollar-variable-pattern

  overflow-x: scroll;
  background:
    linear-gradient(
      to right,
      $scrollableBgColor,
      $scrollableBgColor,
      $scrollableTransparentColor calc($scrollableShadowSize * 2)
    ),
    radial-gradient(farthest-side at 0 50%, $scrollableShadowColor, $scrollableTransparentColor),
    linear-gradient(
      to left,
      $scrollableBgColor,
      $scrollableBgColor,
      $scrollableTransparentColor calc($scrollableShadowSize * 2)
    ),
    radial-gradient(farthest-side at 100% 50%, $scrollableShadowColor, $scrollableTransparentColor) 100%;
  background-color: $scrollableBgColor;
  background-repeat: no-repeat;
  background-attachment: local, scroll, local, scroll;
  background-size:
    100% 100%,
    $scrollableShadowSize 100%,
    100% 100%,
    $scrollableShadowSize 100%;

  &:focus {
    @include govuk-focused-box;
  }
}

@include govuk-media-query($until: 1020px) {
  .moj-scrollable-pane .govuk-table__header,
  .moj-scrollable-pane .govuk-table__cell {
    white-space: nowrap;
  }
}

/*# sourceMappingURL=_scrollable-pane.scss.map */