@import "_global-variables.sass"
@import "_mixins.sass"

:root
  --tooltip-margin: 30px
  --tooltip-arrow-size: 6px

.tooltip-container
  position: relative
  display: inline-block

  .tooltip
    position: absolute
    border-radius: 4px
    left: 50%
    transform: translateX(-50%)
    padding: 6px
    font-size: 14px
    font-family: sans-serif
    line-height: 1
    z-index: 100
    white-space: nowrap

    &::before
      content: " "
      left: 50%
      border: solid transparent
      height: 0
      width: 0
      position: absolute
      pointer-events: none
      border-width: var(--tooltip-arrow-size)
      margin-left: calc(var(--tooltip-arrow-size) * -1)

    @each $name, $size in $sizes
      &.#{$name}
        font-size: $size

        @if $name == "small"
          &.above
            top: calc(var(--tooltip-margin) * -1)
          &.below
            bottom: calc(var(--tooltip-margin) * -1)

        @if $name == "big"
          &.above
            top: calc(var(--tooltip-margin) * -1.5)
          &.below
            bottom: calc(var(--tooltip-margin) * -1.5)

    &.left
      left: auto
      right: calc(100% + var(--tooltip-margin))
      top: 50%
      transform: translateX(0) translateY(-50%)
      &::before
        left: auto
        right: calc(var(--tooltip-arrow-size) * -1)
        top: 50%
        transform: translateX(0) translateY(-50%)

      &::after
        top: 50%
        left: 100%
        margin-top: -5px

    &.right
      left: calc(100% + var(--tooltip-margin))
      top: 50%
      transform: translateX(0) translateY(-50%)
      &::before
        left: calc(var(--tooltip-arrow-size) * -1)
        top: 50%
        transform: translateX(0) translateY(-50%)

      &::after
        top: 50%
        right: 100%
        margin-top: -5px

    &.above
      top: calc(var(--tooltip-margin) * -1.2)
      &::before
        top: 100%

      &::after
        top: 100%
        left: 50%
        margin-left: -5px

    &.below
      bottom: calc(var(--tooltip-margin) * -1.2)
      &::before
        bottom: 100%

      &::after
        bottom: 100%
        left: 50%
        margin-left: -5px

    @each $name, $size in $sizes
        &.#{$name}
            font-size: $size

    &.regular
      @include pallete-style($regular-style, true)
      @include arrow-style($regular-style, true, "left")
      @include arrow-style($regular-style, true, "right")
      @include arrow-style($regular-style, true, "above")
      @include arrow-style($regular-style, true, "below")

    &.outline
      @include pallete-style($outline-style, true)
      @include arrow-style($regular-style, true, "left")
      @include arrow-style($regular-style, true, "right")
      @include arrow-style($regular-style, true, "above")
      @include arrow-style($regular-style, true, "below")
    &.light
      @include pallete-style($light-style, true)
      @include arrow-style($regular-style, true, "left")
      @include arrow-style($regular-style, true, "right")
      @include arrow-style($regular-style, true, "above")
      @include arrow-style($regular-style, true, "below")