@import '../../styles/mixins/dark-mode.scss';

@mixin callout($l-offset: 1.25rem) {
  --Callout-bg: var(--background);
  --Callout-border: var(--border);
  --Callout-border-radius: 2px;
  --Callout-title: var(--title, var(--color-text-default, var(--text)));

  background: var(--Callout-bg);
  border-radius: var(--Callout-border-radius);
  border-color: var(--Callout-border);
  color: var(--text, var(--color-text-default));
  padding: $l-offset;

  &_default {
    // legacy variables
    --background: #{lighten(#dfe2e5, 8.75%)};
    --border: #{lighten(#6a737d, 12.5%)};
    --title: var(--text, var(--color-text-default));

    @include dark-mode {
      --Callout-bg: rgba(var(--gray100-rgb), 0.05);
    }
  }

  &_info {
    --Callout-bg: var(--background, rgba(var(--blue-rgb), 0.1));
    --Callout-border: var(--border, rgba(var(--blue-rgb), 1));
    --Callout-title: var(--title, var(--blue20));

    @include dark-mode {
      --Callout-bg: var(--background, rgba(var(--blue-rgb), 0.075));
      --Callout-title: var(--title, var(--blue90));
    }
  }

  &_warn,
  &_warning {
    --Callout-bg: var(--background, rgba(var(--yellow-rgb), 0.1));
    --Callout-border: var(--border, rgba(var(--yellow-rgb), 1));
    --Callout-title: var(--title, var(--yellow10));

    @include dark-mode {
      --Callout-bg: var(--background, rgba(var(--yellow-rgb), 0.075));
      --Callout-title: var(--title, var(--yellow70));
    }
  }

  &_ok,
  &_okay,
  &_success {
    --Callout-bg: var(--background, rgba(var(--green-rgb), 0.1));
    --Callout-border: var(--border, rgba(var(--green-rgb), 1));
    --Callout-title: var(--title, var(--green10));

    @include dark-mode {
      --Callout-bg: var(--background, rgba(var(--green-rgb), 0.075));
      --Callout-title: var(--title, var(--green80));
    }
  }

  &_err,
  &_error {
    --Callout-bg: var(--background, rgba(var(--red-rgb), 0.1));
    --Callout-border: var(--border, rgba(var(--red-rgb), 1));
    --Callout-title: var(--title, var(--red20));

    @include dark-mode {
      --Callout-bg: var(--background, rgba(var(--red-rgb), 0.05));
      --Callout-title: var(--title, var(--red90));
    }
  }

  > * {
    margin-left: $l-offset;
  }

  ul,
  ol {
    padding-left: 1.3em;
  }

  h3 a,
  .callout-heading a {
    color: inherit;
  }

  hr {
    border-color: var(--border, var(--markdown-edge, #eee));
  }

  blockquote:not(.callout) {
    color: var(--color-text-default, var(--text));
    border-color: var(--border);
    border-width: 3px;
    padding: 0 0 0 0.8em;

    &:is(h3 *, .callout-heading *) {
      color: inherit;
    }
  }

  h3, // for compatibility with old callouts
  .callout-heading {
    --markdown-title-weight: 500;

    color: var(--Callout-title);
    font-family: var(--markdown-title-font); // match h3
    font-size: 1.25em; // match h3
    font-weight: var(--markdown-title-weight, 500);
    line-height: 1.25; // match h3
    margin-bottom: calc(#{$l-offset} * 0.5);
    position: relative;

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

    &.empty {
      float: left;

      &:is(p) {
        margin-left: 0;
      }
    }

    > * {
      color: inherit;
      margin: 0;
    }

    // legacy icon behavior (changes in superhub)
    .callout-icon {
      margin-left: calc(-#{$l-offset} - 0.5em);

      &::before {
        transform: translate(-50%, -50%);
      }
    }

    &:before {
      position: absolute;
      right: 100%;
      width: 2.4em;
      text-align: center;
      font: normal normal normal 1em/1 var(--icon-font);
    }
  }

  .callout-icon {
    float: left;
    margin-left: -0.5rem;
    position: relative;

    // float doesn’t work when there’s nothing else
    &:only-child {
      float: none;
    }
  }

  .callout-icon + * {
    color: var(--Callout-title);
  }

  .callout-icon + .heading.heading {
    margin-top: 0;
  }

  > .callout-icon_fa {
    --fa-primary-color: var(--Callout-title);
    --fa-secondary-color: var(--Callout-title);

    margin-top: 0.25rem;
  }
}

@mixin calloutCustomIcons($R: callout) {
  --emoji: 1em;
  --icon-font: var(--fa-style-family, 'Font Awesome 6 Pro', 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%;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  &-icon_fa::before,
  &-icon_fa::after {
    font-family: inherit;
    font-size: inherit;
    top: unset;
    transform: none;
  }
  @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);
}