.root {
  --blur: 1px;
  --stop: 25%;
  --height: 150px;
  position: fixed;
  pointer-events: none;
  width: 100%;
  height: var(--height);
  user-select: none;
  -webkit-user-select: none;
  left: 0;
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));

  &[data-side="top"] {
    top: 0;
    background: linear-gradient(to top, transparent, transparent);
    mask-image: linear-gradient(
      to bottom,
      var(--background) var(--stop),
      transparent
    );
  }

  &[data-side="left"] {
    height: 100%;
    width: var(--height);
    left: 0;
    background: linear-gradient(to left, transparent, var(--background));
    mask-image: linear-gradient(
      to right,
      var(--background) var(--stop),
      transparent
    );
  }

  &[data-side="right"] {
    height: 100%;
    width: var(--height);
    right: 0;
    left: unset;
    background: linear-gradient(to right, transparent, var(--background));
    mask-image: linear-gradient(
      to left,
      var(--color-primary) var(--stop),
      transparent
    );
  }
  &[data-side="bottom"] {
    bottom: 0;
    background: linear-gradient(to bottom, transparent, var(--background));
    mask-image: linear-gradient(
      to top,
      var(--color-primary) var(--stop),
      transparent
    );
  }
}
