@import "pack/seed-family/_index";

.c-Scrollable {
  $br: 4px;
  $background: white;

  box-sizing: border-box;
  display: flex;
  max-height: 100%;
  min-height: 0;
  position: relative;
  width: 100%;

  &__fade {
    background: linear-gradient($background, rgba($background, 0.7), rgba($background, 0));
    height: 28px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;

    @include parent(".is-rounded") {
      border-top-left-radius: $br;
      border-top-right-radius: $br;
    }
  }

  &__fader {
    color: white;
    height: 28px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleY(0);
    z-index: 1;

    @include parent(".is-rounded") {
      border-top-left-radius: $br;
      border-top-right-radius: $br;
    }

    &.is-top {
      background: linear-gradient(to bottom, currentColor, rgba(255, 255, 255, 0));
      transform-origin: top;
      top: 0;
    }
    &.is-bottom {
      background: linear-gradient(to top, currentColor, rgba(255, 255, 255, 0));
      bottom: 0;
      transform-origin: bottom;
    }
  }

  &__content {
    box-sizing: border-box;
    max-height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    width: 100%;
    will-change: scroll-position;
  }
}