@import "../colors.css";
@import "../spacing.css";
@import "../typography.css";

:root {
  --alert-margin: 0;
  --alert-padding: var(--spacing-tiny);
  --alert-content-margin-right: var(--spacing-small);

  --alert-border-radius: 5px;

  --alert-font-family: var(--title-font-family);
  --alert-font-size: 14px;

  --alert-icon-border-radius: var(--alert-border-radius);
  --alert-icon-height: calc(100% - 2px);
  --alert-icon-padding-right: var(--spacing-tiny);
  --alert-icon-size: 16px;

  --alert-error-color: var(--color-beth-pink-100);
  --alert-error-background-color: var(--color-beth-pink-20);

  --alert-info-color: var(--color-mrmeeseks-blue-200);
  --alert-info-background-color: var(--color-mrmeeseks-blue-20);

  --alert-success-color: var(--color-picklerick-green-200);
  --alert-success-background-color: var(--color-picklerick-green-20);

  --alert-warning-color: var(--color-barney-purple-100);
  --alert-warning-background-color: var(--color-barney-purple-20);
}