@layer component.theme {
  .dispatch {
    --dispatch-color: lightgrey;
    --dispatch-background: color-mix(
      var(--dispatch-color),
      light-dark(white, black) 61.8%
    );
    background-color: var(--dispatch-background);
    border: 1px solid var(--dispatch-color);
    color: contrast-color(var(--dispatch-background));
  }

  .dispatch__inner {
    a {
      color: inherit;
    }
  }
  .dispatch--warning {
    --dispatch-color: yellow;
  }

  .dispatch--error {
    --dispatch-color: red;
  }
}