alchemy-message {
  display: block;
  border-width: var(--border-width_small);
  border-style: var(--border-style);
  border-radius: var(--border-radius_medium);
  position: relative;
  padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-8);
  margin-bottom: var(--spacing-2);
  text-align: left;
  min-height: 2.6em;
  word-break: break-word;
  line-height: 1.5;

  turbo-frame & {
    margin: var(--spacing-2);
  }

  &[type="footnote"] {
    font-size: var(--font-size_small);
    margin: var(--spacing-4);
  }

  &[type="notice"] {
    border-color: var(--notice-success-border-color);
    color: var(--notice-success-text-color);
    background-color: var(--notice-success-background-color);
  }

  &[type="hint"] {
    background-color: var(--hint-background-color);
    border-color: var(--hint-background-color);
    color: var(--hint-text-color);
  }

  &[type="info"] {
    background-color: var(--notice-info-background-color);
    border-color: var(--notice-info-border-color);
    color: var(--notice-info-text-color);
  }

  &[type="error"] {
    background-color: var(--notice-error-background-color);
    border-color: var(--notice-error-border-color);
    color: var(--notice-error-text-color);
  }

  &[type="warning"],
  &[type="warn"],
  &[type="alert"] {
    background-color: var(--notice-warning-background-color);
    border-color: var(--notice-warning-border-color);
    color: var(--notice-warning-text-color);
  }

  alchemy-icon {
    position: absolute;
    left: var(--spacing-2);
    top: 9px;
    color: inherit;

    .icon {
      fill: currentColor;
    }
  }

  h1 {
    font-size: 1.3rem;
    line-height: 1.1;
  }

  h1,
  h2,
  h3 {
    margin-top: 0;
  }

  a[href] {
    text-decoration: underline;
    color: var(--hint-text-link-color);

    &:hover {
      color: inherit;
      text-decoration: none;
    }
  }

  ol {
    margin: 0 0 var(--spacing-2);
    padding-left: var(--spacing-5);

    li {
      text-indent: 0;
      margin-bottom: var(--spacing-1);
    }
  }
}
