@mixin callout ($l-offset: 1.33rem) {
  --background: #{lighten(#dfe2e5, 8.75%)};
  --border: #{lighten(#6a737d, 12.5%)};

  & {
    background: var(--background);
    border-color: var(--border);
    color: var(--text);
    padding: $l-offset;
  }

  &_info {
    $color: #46b8da;
    --background: #e3edf2;
    --title: #{$color};
    --border: #{lighten($color, 5%)}; // should be #5bc0de
  }

  &_warn, &_warning {
    $color: #eea236;
    --background: #fcf8f2;
    --title: #{$color};
    --border: #{lighten($color, 5%)};
  }

  &_ok, &_okay, &_success {
    $color: #489e49;
    --background: #f3f8f3;
    --title: #{$color};
    --border: #{lighten($color, 5%)}; // should be #50af51
  }

  &_err, &_error {
    $color: #d43f3a;
    --background: #fdf7f7;
    --title: #{$color};
    --border: #{lighten($color, 5%)};  // should be #d9534f
  }

  > * {
    margin-left: $l-offset;
    position: relative;
  }
  ul, ol {
    padding-left: 1.3em;
  }

  a {
    color: inherit;
  }
  hr {
    border-color: var(--border, var(--markdown-edge, #eee));
  }
  blockquote {
    color: var(--text);
    border-color: var(--border);
    border-width: 3px;
    padding: 0 0 0 .8em;
  }

  .callout-heading {
    color: var(--title, --text);
    margin-bottom: calc(#{$l-offset} * .5);
    &:only-child {
      margin-bottom: 0;
    }
    &.empty {
      float: left;
      margin-top: calc(#{$l-offset} * .5);
      .callout-icon {
        line-height: 0;
      }
    }
    > * {
      color: inherit;
      margin: 0;
    }
    &:before {
      position: absolute;
      right: 100%;
      width: 2.4em;
      text-align: center;
      font: normal normal normal 1em/1 FontAwesome;
    }
  }
  .callout-icon {
    float: left;
    margin-left: calc(-#{$l-offset} - .5em);
    margin-right: -.25rem;
  }
}
@mixin calloutCustomIcons($R: callout) {
  --emoji: 1em;
  --icon-font: FontAwesome;
  &-icon {
    font-size: var(--emoji, 0);
    color: var(--icon-color, inherit) !important;
  }
  &-icon:before {
    content: var(--icon);
    font-family: var(--icon-font);
    font-size: var(--icon-size, 1rem);
    font-weight: var(--icon-weight, 400);
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  @at-root .rdmdCallouts--useIconFont & {
    --emoji: unset;
    &_okay {
      /* thumbs up */
      --icon: "\f164";
    }
    &_info {
      /* info circle */
      --icon: "\f05a";
    }
    &_warn {
      /* warning triangle */
      --icon: "\f071";
    }
    &_error {
      /* warning circle */
      --icon: "\f06a";
    }
    &_default {
      /* warning circle */
      --emoji: 1rem;
    }
  }
}

.callout {
  &.callout { // bump specificity
    @include callout;
  }
  @include calloutCustomIcons;
  border-top-right-radius: var(--markdown-radius);
  border-bottom-right-radius: var(--markdown-radius);
}