@layer base-styles {
  .gradient-layer-v3 {
    display: grid;
    grid-template: "main"/1fr;
    --spread: calc(100% - var(--gradient-spread));
  }
  .gradient-layer-v3__gradient-overlay-element {
    position: absolute;
    inset: 0;
    z-index: var(--gradient-zindex);
    grid-area: var(--gradient-grid-area);
  }
  .gradient-layer-v3__gradient-overlay-element::before,
  .gradient-layer-v3__gradient-overlay-element:after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    opacity: var(--gradient-opacity);
  }
  .gradient-layer-v3__gradient-overlay-element::before {
    background:
      linear-gradient(
        var(--gradient-origin-before),
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
        var(--gradient-colour) calc(100% - var(--gradient-amount)));
  }
  .gradient-layer-v3__gradient-overlay-element::after {
    content: var(--enable-after);
    background:
      linear-gradient(
        var(--gradient-origin-after),
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
        var(--gradient-colour) calc(100% - var(--gradient-amount)));
  }
  .gradient-layer-v3__blur-overlay-element {
    background: var(--blur-colour);
    backdrop-filter: blur(var(--blur-value));
    position: absolute;
    inset: 0;
    z-index: var(--blur-zindex);
  }
}