/* stylelint-disable no-descending-specificity */
/* stylelint-disable font-family-no-missing-generic-family-keyword */
/* stylelint-disable order/properties-alphabetical-order */
/* stylelint-disable order/order */
@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 0.8em;
  }

  .callout-heading {
    color: var(--title, --text);
    margin-bottom: calc(#{$l-offset} * 0.5);

    &:only-child {
      margin-bottom: 0;
    }

    &.empty {
      float: left;
      margin-top: calc(#{$l-offset} * 0.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} - 0.5em);
    margin-right: -0.25rem;
  }
}
@mixin callout-custom-icons($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 callout-custom-icons;

  border-top-right-radius: var(--markdown-radius);
  border-bottom-right-radius: var(--markdown-radius);
}