@layer component {
  [data-drupal-messages] .messages {
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    border-width: 2px;
    border-style: solid;

    &.messages--status {
      background-color: var(--color-ui-success);
      border-color: var(--color-ui-success-dark);
    }

    &.messages--warning {
      background-color: var(--color-ui-info);
      border-color: var(--color-ui-info-dark);
    }

    &.messages--error {
      background-color: var(--color-ui-error);
      border-color: var(--color-ui-error-dark);
    }
  }
}