.alert-info {
  --alert-info-color: var(--info-color);
  --alert-info-bg-color: var(--info-bg-color);

  margin-inline: var(--additional-padding);
  margin-block-end: 2rem;
  border: 1px solid var(--alert-info-color);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: var(--alert-info-bg-color);
  width: 100%;

  &.alert-info-error {
    --alert-info-color: var(--error-color);
    --alert-info-bg-color: var(--error-bg-color);
  }

  &.alert-info-success {
    --alert-info-color: var(--success-color);
    --alert-info-bg-color: var(--success-bg-color);
  }

  header {
    display: flex;
    align-items: flex-start;

    h2 {
      color: var(--alert-info-color);
      display: flex;
      align-items: center;
      gap: 0.25rem;
      margin: 0;
      flex-grow: 1;
      padding-inline-start: 1.25rem;
      padding-block-start: 1.25rem;
    }

    button {
      width: 2.5rem;
      height: 2.5rem;
      background-color: white;
      color: var(--alert-info-color);
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      border-inline-start: 1px solid var(--alert-info-color);
      border-block-end: 1px solid var(--alert-info-color);
      cursor: pointer;
    }
  }

  ul {
    margin: 0;
    padding: 1.25rem;

    li {
      list-style: none;
    }
  }

  a {
    color: oklch(from var(--action-color) 0.45 c h);
  }
}