@layer atoms {
  .mobius-alert__icon {
    margin-right: var(--size-sm);
  }

  .mobius-alert {
    display: flex;
    flex-grow: 1;
    align-items: center;
    font-size: var(--font-size-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    border: 2px solid;
    border-color: inherit;
    border-radius: var(--radius-1);
    padding: var(--size-sm);

    &.--has-header {
      align-items: start;

      & .mobius-alert__icon {
        margin-top: 2px;
      }
    }

    &.--info {
      border-color: var(--color-info);
      background-color: var(--color-info-background);
    }

    &.--success {
      border-color: var(--color-valid);
      background-color: var(--color-valid-background);
    }

    &.--warning {
      border-color: var(--color-warning);
      background-color: var(--color-warning-background);
    }

    &.--error {
      border-color: var(--color-error);
      background-color: var(--color-error-background);
    }
  }

  .mobius-alert__icon .mobius-icon {
    height: 1.32em;
  }

  .mobius-alert__header {
    margin: 0 0 var(--size-xxs);
    font-size: var(--font-size-regular);
    font-weight: 600;
  }
}
