.cobalt- {
  &alerter {
    // Force alerts to display bottom-end when larger than mobile
    @include breakpoint($from: "md") {
      align-items: flex-end !important;
    }
  }

  &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-info c-text-info;
    }

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

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

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

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