.cobalt-callout {
  @apply c-text-body-md c-bg-surfaceContainerVariant c-rounded-xl c-p-sm c-gap-sm;

  position: relative;

  display: flex;

  &--warning {
    @apply c-bg-warningContainer c-text-onWarningContainer;
  }

  &--neutral {
    @apply c-bg-surfaceContainerVariant;
  }

  &--error {
    @apply c-bg-errorContainer c-text-onErrorContainer;
  }

  &__title {
    @apply c-text-title-sm c-mb-2xs;
  }

  &__body {
    flex: 1 1;
  }

  &__body a {
    color: inherit;
  }

  &__content {
    flex: 1 1;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
  }

  &__illustration {
    @apply c-rounded-xl;

    width: 80px;
    height: 80px;
    align-self: flex-start;

    object-fit: cover;
  }

  .cob-Button,
  .cobalt-button {
    @apply c-mt-xs;
  }
}