@layer components {
  .flash-message {
    padding-block: var(--block-space);
    padding-inline: calc(var(--inline-space) * 2);
    margin-block: var(--block-space);
    margin-inline: auto;
    max-inline-size: 800px;
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    border: 1px solid transparent;

    &.error {
      background: color-mix(in srgb, var(--color-error) 15%, var(--color-canvas));
      color: color-mix(in srgb, var(--color-error) 80%, black);
      border-color: color-mix(in srgb, var(--color-error) 30%, transparent);

      @media (prefers-color-scheme: dark) {
        background: color-mix(in srgb, var(--color-error) 20%, var(--color-canvas));
        color: color-mix(in srgb, var(--color-error) 90%, white);
      }
    }

    &.notice {
      background: color-mix(in srgb, var(--color-success) 15%, var(--color-canvas));
      color: color-mix(in srgb, var(--color-success) 80%, black);
      border-color: color-mix(in srgb, var(--color-success) 30%, transparent);

      @media (prefers-color-scheme: dark) {
        background: color-mix(in srgb, var(--color-success) 20%, var(--color-canvas));
        color: color-mix(in srgb, var(--color-success) 90%, white);
      }
    }

    &.warning {
      background: color-mix(in srgb, var(--color-warning) 15%, var(--color-canvas));
      color: color-mix(in srgb, var(--color-warning) 80%, black);
      border-color: color-mix(in srgb, var(--color-warning) 30%, transparent);

      @media (prefers-color-scheme: dark) {
        background: color-mix(in srgb, var(--color-warning) 20%, var(--color-canvas));
        color: color-mix(in srgb, var(--color-warning) 90%, white);
      }
    }
  }

}