.cobalt- {
  &Callout {
    @apply c-text-body-md c-text-onSurface c-bg-surfaceBright c-rounded c-shadow c-p-sm c-mb-md;

    position: relative;

    &:before {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;

      display: block;
      width: 3px;

      border-top-left-radius: inherit;
      border-bottom-left-radius: inherit;

      content: "";
    }
  }

  &Callout--info {
    &:before {
      @apply c-bg-warning;
    }
  }

  &Callout--success {
    &:before {
      @apply c-bg-success;
    }
  }

  &Callout--error {
    &:before {
      @apply c-bg-error;
    }
  }

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

  &Callout__Close {
    position: absolute;

    top: -14px;
    right: -20px;

    border: 0;

    background-color: transparent;

    cursor: pointer;

    .cobalt-Icon {
      @apply c-state-interactive c-transition-interactive;
    }
  }
}