/* Default alerts and alerts in News Feed article editor */
.alert, .cdx-alert {
  align-items: flex-start;
  background-color: color-mix(in srgb, var(--theme-color), white 90%);
  border: 1px solid var(--theme-color-darker);
  border-radius: calc(var(--border-radius) / 2);
  color: var(--theme-color-darker);
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-content: flex-start;
  padding: calc(1rem - 1px);
  position: relative;

  svg {
    fill: var(--theme-color-darker);
    margin: 2px 0;
  }

  p.alert__message, .cdx-alert__message {
    color: var(--theme-color-darker);
  }

  /* MODIFIER I: SIZE */
  &.alert--sm {
    padding: calc(0.5rem - 1px);
  }

  &.alert--fit {
    width: fit-content;
  }

  /* MODIFIER II: ALIGNMENT */
  &.alert--left, &.cdx-alert-align-left {
    justify-content: flex-start;
  }

  &.alert--center, &.cdx-alert-align-center {
    justify-content: center;
  }

  &.alert--right, &.cdx-alert-align-right {
    justify-content: flex-end;
  }

  /* MODIFIER II: COLOURS */
  &.cdx-alert-primary { /* CDX ONLY */
    background-color: color-mix(in srgb, var(--theme-color), white 90%);
    border-color: var(--theme-color-darker);
    color: var(--theme-color-darker);

    svg {
      fill: var(--theme-color-darker);
    }

    p.alert__message, .cdx-alert__message {
      color: var(--theme-color-darker);
    }
  }

  &.alert--light, &.cdx-alert-light {
    background-color: color-mix(in srgb, var(--mid-gray), white 90%);
    border-color: var(--light-gray);
    color: var(--ink);

    svg {
      fill: var(--ink);
    }

    p.alert__message, .cdx-alert__message {
      color: var(--ink);
    }
  }

  &.alert--neutral, &.cdx-alert-secondary {
    background-color: color-mix(in srgb, var(--ink-gray), white 90%);
    border-color: var(--ink);
    color: var(--ink);

    svg {
      fill: var(--ink);
    }

    p.alert__message, .cdx-alert__message {
      color: var(--ink);
    }
  }

  &.alert--dark, &.cdx-alert-dark {
    background-color: color-mix(in srgb, var(--ink), white 10%);
    border-color: var(--ink);
    color: var(--pure-white);

    svg {
      fill: var(--pure-white);
    }

    p.alert__message, .cdx-alert__message {
      color: var(--pure-white);
    }
  }

  &.alert--notice, &.cdx-alert-info {
    background-color: color-mix(in srgb, var(--brand-turquoise), white 90%);
    border-color: var(--brand-charcoal);
    color: var(--brand-charcoal);

    svg {
      fill: var(--brand-charcoal);
    }

    p.alert__message, .cdx-alert__message {
      color: var(--brand-charcoal);
    }
  }

  &.alert--success, &.cdx-alert-success {
    background-color: color-mix(in srgb, var(--success), white 90%);
    border-color: var(--success-dark);
    color: var(--success-dark);

    svg {
      fill: var(--success-dark);
    }

    p.alert__message, .cdx-alert__message {
      color: var(--success-dark);
    }
  }

  &.alert--alert {
    background-color: color-mix(in srgb, var(--yellow), white 90%);
    border-color: var(--yellow-darker);
    color: var(--yellow-darker);

    svg {
      fill: var(--yellow-darker);
    }

    p.alert__message, .cdx-alert__message {
      color: var(--yellow-darker);
    }
  }

  &.alert--warning, &.cdx-alert-warning {
    background-color: color-mix(in srgb, var(--warning), white 90%);
    border-color: var(--warning-dark);
    color: var(--warning-dark);

    svg {
      fill: var(--warning-dark);
    }

    p.alert__message, .cdx-alert__message {
      color: var(--warning-dark);
    }
  }

  &.alert--danger, &.cdx-alert-danger {
    background-color: color-mix(in srgb, var(--danger), white 90%);
    border-color: var(--danger-dark);
    color: var(--danger-dark);

    svg {
      fill: var(--danger-dark);
    }

    p.alert__message, .cdx-alert__message {
      color: var(--danger-dark);
    }
  }
}