.overlay {
  --fade-overlay-color: var(--color-bg-surface);
  --fade-overlay-size: 65%;

  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

.bottom {
  background: linear-gradient(
    to top,
    var(--fade-overlay-color) 0%,
    transparent var(--fade-overlay-size)
  );
}

.top {
  background: linear-gradient(
    to bottom,
    var(--fade-overlay-color) 0%,
    transparent var(--fade-overlay-size)
  );
}

.left {
  background: linear-gradient(
    to right,
    var(--fade-overlay-color) 0%,
    transparent var(--fade-overlay-size)
  );
}

.right {
  background: linear-gradient(
    to left,
    var(--fade-overlay-color) 0%,
    transparent var(--fade-overlay-size)
  );
}

.sm {
  --fade-overlay-size: 40%;
}

.md {
  --fade-overlay-size: 65%;
}

.lg {
  --fade-overlay-size: 85%;
}