@mixin tooltip($name, $bg)
  .tippy-tooltip.#{$name}-theme
    background-color: $bg
    @content
    & [x-circle]
      background-color: $bg
    .tippy-popper[x-placement^=top] & [x-arrow]
      border-top-color: $bg !important
    .tippy-popper[x-placement^=bottom] & [x-arrow]
      border-bottom-color: $bg !important
    .tippy-popper[x-placement^=left] & [x-arrow]
      border-left-color: $bg !important
    .tippy-popper[x-placement^=right] & [x-arrow]
      border-right-color: $bg !important

.tippy-popper
  font-family: "Red Hat Text", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

@include tooltip(dark, #27272a)

body, html
  padding: 0
  margin: 0

html::-webkit-scrollbar
  width: 15px

html::-webkit-scrollbar-track
  border-radius: 10px
  border: 3px solid #18181b

html::-webkit-scrollbar-thumb
  background-color: #27272a
  border-radius: 10px
  border: 3px solid #18181b
