.cobalt- {
  &alert {
    @apply c-text-body-md c-p-sm c-mx-sm c-mb-sm c-shadow-md c-rounded-md;
    z-index: var(--z-index);

    height: var(--height);
    display: inline-block;
    min-width: 16rem;
    max-width: 50rem;

    opacity: var(--opacity);

    transition:
      translate 300ms,
      scale 300ms,
      opacity 300ms;
    translate: var(--x) var(--y);
    scale: var(--scale);

    transition-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1);
    will-change: translate, opacity, scale;

    a {
      @apply c-font-bold;
      color: currentColor;
    }

    &[data-state="closed"] {
      transition:
        translate 200ms,
        scale 200ms,
        opacity 200ms;
      transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
    }

    &[data-type="info"] {
      @apply c-bg-tertiaryContainer c-text-onTertiaryContainer;
    }

    &[data-type="success"] {
      @apply c-bg-successContainer c-text-onSuccessContainer;
    }

    &[data-type="error"] {
      @apply c-bg-errorContainer c-text-onErrorContainer;
    }

    &__wrapper {
      @apply c-gap-xs;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .cobalt-Icon {
        margin: unset;
      }
    }
  }
}