.cobalt-marketing-note {
  @apply c-rounded-xl c-p-sm c-gap-xs c-text-body-sm;

  display: flex;
  align-items: flex-start;
}

.cobalt-marketing-note__icon-container {
  --icon-container-size: 28px;

  display: flex;

  justify-content: center;
  align-items: center;

  width: var(--icon-container-size);
  height: var(--icon-container-size);
}

.cobalt-marketing-note__icon-container .cobalt-Icon {
  width: 100%;
  height: 100%;
}

.cobalt-marketing-note__content {
  flex: 1 1 0%;
  align-self: center;
}

.cobalt-marketing-note.cobalt-marketing-note--success {
  @apply c-bg-successContainer c-text-onSuccessContainer;

  .cobalt-Icon {
    @apply c-fill-onSuccessContainer;
  }
}

.cobalt-marketing-note.cobalt-marketing-note--tertiary {
  @apply c-bg-tertiaryContainer c-text-onTertiaryContainer;

  .cobalt-Icon {
    @apply c-fill-onTertiaryContainer;
  }
}

.cobalt-marketing-note.cobalt-marketing-note--compact {
  @apply c-rounded-lg c-py-xs;

  padding-left: 0.75rem;

  .cobalt-marketing-note__icon-container {
    --icon-container-size: 20px;
  }
}