@layer components {
  :root {
    --alert-border-default: none;
    --alert-border-radius: var(--radius-site);
    --alert-padding: 0.5em;
    --alert-icon-min-height: 24px;
    --alert-icon-height: 24px;
    --alert-icon-min-width: 24px;
    --alert-icon-width: 24px;
    --alert-icon-padding-x: 0rem;
    --alert-icon-padding-y: 0.25rem;
  }

  .alert {
    display: flex;
    flex-direction: row;
    align-items: start;
    padding: var(--alert-padding);
    font-weight: var(--alert-font-weight);
    border: var(--alert-border-default) solid;
    border-radius: var(--alert-border-radius);
  }

  .alert a {
    font-weight: var(--font-weight-bold);
  }
  .alert a:hover {
    text-decoration: underline;
  }

  .alert-icon {
    padding: var(--alert-icon-padding-x), var(--alert-icon-padding-y);
    height: var(--alert-icon-height);
    width: var(--alert-icon--width);
    min-width: var(--alert-icon-min-width);
    min-height: var(--alert-icon-min-height);
    margin-right: var(--alert-padding);
  }
}