.faded-pattern-br {
  --end: var(--tw-gradient-to);

  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to var(--dir, right), transparent 75%, var(--end, transparent));
    z-index: 1;
  }

  &:after {
    --dir: bottom;
  }
}

.faded-pattern-bl {
  --end: var(--tw-gradient-to);

  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to var(--dir, left), transparent 75%, var(--end, transparent));
    z-index: 1;
  }

  &:after {
    --dir: bottom;
  }
}

.faded-pattern-x {
  --end: var(--tw-gradient-to);

  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to var(--dir, left), transparent 75%, var(--end, transparent));
    z-index: 1;
  }

  &:after {
    --dir: right;
  }
}

.faded-pattern {
  --end: var(--tw-gradient-to);

  &:before,
  &:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to var(--dir, right), var(--end, transparent), transparent 25%, transparent 75%, var(--end, transparent));
    z-index: 1;
  }

  &:after {
    --dir: bottom;
  }
}

.faded-scroll-y {
  --end: var(--tw-gradient-to);

  height: 100%;
  display: flex;
  flex-direction: column;
  container-type: size;
  position: relative;

  &:before,
  &:after {
    content: '';
    width: 100%;
    height: 3rem;
    pointer-events: none;
    position: absolute;
    left: 0;
    z-index: 10;
    transition: all 300ms ease-in-out;

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  &:before {
    background: linear-gradient(to top, transparent 25%, var(--end, transparent));
    opacity: var(--opacity-top, 1);
    top: 0;
  }

  &:after {
    background: linear-gradient(to bottom, transparent 25%, var(--end, transparent));
    opacity: var(--opacity-bottom, 1);
    bottom: 0;
  }

  ul {
    flex: 1;
    overflow-y: auto;
    max-height: 100cqh;
  }
}

.faded-scroll-carousel {
  --end: var(--tw-gradient-to);

  position: relative;

  &:before,
  &:after {
    content: '';
    width: 3rem;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 10;
    transition: all 300ms ease-in-out;

    @media (prefers-reduced-motion: reduce) {
      transition: none;
    }
  }

  &:before {
    background: linear-gradient(to left, transparent 25%, var(--end, transparent));
    opacity: var(--opacity-left, 1);
    left: 0;
  }

  &:after {
    background: linear-gradient(to right, transparent 25%, var(--end, transparent));
    opacity: var(--opacity-right, 1);
    right: 0;
  }
}
