@import "../mixins/mixins";
@import "../mixins/typo";
@import "../config/variables";

@include b(tooltip) {
  &:focus:not(.focusing), &:focus:hover {
    outline-width: 0;
  }
  @include e(popper) {
    position: absolute;
    border-radius: $--border-radius;
    padding: $--size-base * 4;
    z-index: 2000;
    min-width: 10px;
    max-width: 280px;
    box-sizing: border-box;
    background: $--color-text;
    color: $--color-white;
    @include bodyXS;

    .popper__arrow,
    .popper__arrow::after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
    }

    .popper__arrow {
      border-left-width: 6px;
      border-right-width: 6px;
      border-top-width: 4px;
    }

    .popper__arrow::after {
      content: " ";
      border-left-width: 6px;
      border-right-width: 6px;
      border-top-width: 4px;
    }

    &[x-placement^="top"] {
      margin-bottom: $--size-base * 2 + 6px;
    }

    &[x-placement^="top"] .popper__arrow {
      bottom: -$--size-base;
      border-top-color: $--color-text;
      border-bottom-width: 0;

      &::after {
        bottom: 0;
        margin-left: -6px;
        border-top-color: $--color-text;
        border-bottom-width: 0;
      }
    }

    &[x-placement^="bottom"] {
      margin-top: $--size-base * 2 + 6px;
    }

    &[x-placement^="bottom"] .popper__arrow {
      top: -$--size-base;
      border-top-width: 0;
      border-bottom-color: $--color-text;
      border-left-width: 6px;
      border-right-width: 6px;
      border-bottom-width: 4px;

      &::after {
        top: 0px;
        margin-left: -6px;
        border-top-width: 0;
        border-bottom-color: $--color-text;
        border-left-width: 6px;
        border-right-width: 6px;
        border-bottom-width: 4px;
      }
    }

    &[x-placement^="right"] {
      margin-left: $--size-base * 2 + 6px;
    }

    &[x-placement^="right"] .popper__arrow {
      left: -$--size-base;
      border-right-color: $--color-text;
      border-left-width: 0;
      border-right-width: 4px;
      border-top-width: 6px;
      border-bottom-width: 6px;

      &::after {
        bottom: -6px;
        left: 0px;
        border-right-color: $--color-text;
        border-left-width: 0;
        border-right-width: 4px;
        border-top-width: 6px;
        border-bottom-width: 6px;
      }
    }

    &[x-placement^="left"] {
      margin-right: $--size-base * 2 + 6px;
    }

    &[x-placement^="left"] .popper__arrow {
      right: -$--size-base;
      border-right-width: 0;
      border-left-color: $--color-text;
      border-left-width: 4px;
      border-top-width: 6px;
      border-bottom-width: 6px;

      &::after {
        right: 0px;
        bottom: -6px;
        margin-left: -6px;
        border-right-width: 0;
        border-left-color: $--color-text;
        border-left-width: 4px;
        border-top-width: 6px;
        border-bottom-width: 6px;
      }
    }
  }
}