@use 'sass:list';

@font-face {
  font-family: 'Miso Hosted Noto Sans';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(../font/noto-sans.woff2) format('woff');
}
@font-face {
  font-family: 'Miso Hosted Noto Sans Symbols';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../font/noto-sans-symbols.woff2) format('woff2');
}

$dingbat-circled-numbers: ➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯ ⑰ ⑱ ⑲ ⑳;
$dingbat-negative-circled-numbers: ➊ ➋ ➌ ➍ ➎ ➏ ➐ ➑ ➒ ➓ ⓫ ⓬ ⓭ ⓮ ⓯ ⓰ ⓱ ⓲ ⓳ ⓴;

// 21-99
@mixin high-numbers {
  &[data-index^="2"]:not([data-index="2"]):not([data-index="20"]),
  &[data-index^="3"]:not([data-index="3"]),
  &[data-index^="4"]:not([data-index="4"]),
  &[data-index^="5"]:not([data-index="5"]),
  &[data-index^="6"]:not([data-index="6"]),
  &[data-index^="7"]:not([data-index="7"]),
  &[data-index^="8"]:not([data-index="8"]),
  &[data-index^="9"]:not([data-index="9"]) {
    @content;
  }
}

:root {
  --miso-circled-citation-index-inverted-text-color: #fff;
}

.miso-citation-link {
  position: relative;
  margin: 0 0.15em;
  text-decoration: none;

  & + .miso-citation-link {
    margin-left: 0;
  }
  &::before {
    content: '[' attr(data-index) ']';
  }

  > .miso-citation-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65em;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
    color: var(--miso-text-color);
    pointer-events: none;

    &::after {
      content: '';
      position: absolute;
      top: calc(100% - 0.4em);
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
      border: 0.4em solid transparent;
      border-bottom-color: #fff;
      border-right-color: #fff;
      box-shadow: 2px 2px 2px rgba(0, 0, 0, .125);
      background: transparent;
      z-index: 10;
    }
  }
  &:hover > .miso-citation-tooltip {
    display: block;
  }
}
.miso-horizontal,
.miso-list,
.miso-cards,
.miso-carousel {
  .miso-citation-index {
    &::before {
      content: attr(data-index);
    }
  }
}

.miso-circled-citation-index,
.miso-circled-citation-index-dark {
  .miso-citation-link,
  .miso-citation-index {
    display: inline-block;
    font-family: 'Miso Hosted Noto Sans', sans-serif;
    font-weight: 200;
    text-rendering: optimizeLegibility;

    &::before {
      content: attr(data-index);
    }

    @for $i from 1 through list.length($dingbat-circled-numbers) {
      &[data-index="#{$i}"] {
        font-family: 'Miso Hosted Noto Sans Symbols', sans-serif;
        font-weight: 400;

        &::before {
          content: '#{list.nth($dingbat-circled-numbers, $i)}';
        }
      }
    }

    @include high-numbers {
      padding: 0.1em;
      box-sizing: border-box;
      height: 1em;
      width: 1em;
      position: relative;

      &::before {
        display: inline-block;
        height: 100%;
        width: 100%;
        font-size: 0.55em;
        font-weight: 600;
        letter-spacing: -0.03em;
        line-height: 1.15;
        vertical-align: middle;
        margin-bottom: 0.1em;
        text-align: center;
      }
      &::after {
        content: '';
        display: block;
        position: absolute;
        aspect-ratio: 1;
        width: 83%;
        left: 50%;
        top: 61%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 0.08em solid currentColor;
        z-index: -1;
      }
      &:hover {
        &::before {
          color: var(--miso-circled-citation-index-inverted-text-color);
        }
        &::after {
          background-color: currentColor;
        }
      }
    }
  }
  .miso-citation-link {
    line-height: 1em;
    font-size: 1.2em;
    margin: 0 0.1em;
    text-rendering: optimizeLegibility;
    text-decoration: none;

    @for $i from 1 through list.length($dingbat-circled-numbers) {
      &[data-index="#{$i}"] {
        &:hover::before {
          content: '#{list.nth($dingbat-negative-circled-numbers, $i)}';
        }
      }
    }
    & + .miso-citation-link {
      margin-left: 0;
    }
    &:hover {
      background-color: transparent;
    }
  }
  .miso-horizontal,
  .miso-list,
  .miso-cards,
  .miso-carousel {
    .miso-citation-index {
      font-size: 1.25rem;

      @include high-numbers {
        &::after {
          z-index: 0;
        }
        // return to original setting to negate hover effect
        &:hover {
          &::before {
            color: var(--miso-border-color-medium);
          }
          &::after {
            background-color: transparent;
          }
        }
      }
    }
  }
}
.miso-circled-citation-index-dark {
  .miso-citation-link,
  .miso-citation-index {
    @for $i from 1 through list.length($dingbat-circled-numbers) {
      &[data-index="#{$i}"] {
        &::before {
          content: '#{list.nth($dingbat-negative-circled-numbers, $i)}' !important;
        }
      }
    }
    @include high-numbers {
      &:before {
        color: var(--miso-circled-citation-index-inverted-text-color) !important;
        font-weight: 300 !important;
      }
      &::after {
        background-color: currentColor !important;
      }
    }
  }
}