@import '../utils/theme/variables.scss';
$background-dark: $brc-darkGreyBlue !default;
$background-light: $brc-white !default;
$border-radius: 5px !default;
$border-color-dark: transparent !default;
$border-color-light: $brc-silver !default;
$text-color-dark: $brc-white !default;
$text-color-light: $brc-darkGreyBlue !default;
$arrow-size: 5px !default;
$arrow-color: $brc-darkGreyBlue !default;

.tooltip {
  z-index: 10000;
  margin-left: -1px; // border-width
  border: 1px solid;
  border-radius: $border-radius;
  max-width: 250px;
  text-align: center;
  word-wrap: break-word;

  &.is-dark {
    border-color: $border-color-dark;
    background: $background-dark;
    color: $text-color-dark;
  }

  &.is-light {
    border-color: $border-color-light;
    background: $background-light;
    color: $text-color-light;
  }

  &.is-small {
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 400;
  }

  &.is-big {
    padding: 17px 14px;
    font-size: 16px;
    font-weight: 400;
  }

  &::after,
  &::before {
    content: ' ';
    position: absolute;
    border: solid transparent;
    border-width: $arrow-size;
    height: 0;
    width: 0;
    pointer-events: none;
  }

  &::before {
    border-width: $arrow-size + 1;
  }

  &.position-bottom {
    // take into account arrow-size for positioning
    margin-top: ($arrow-size + 1);

    &::after,
    &::before {
      bottom: 100%;
    }

    &.is-dark {
      &::after {
        border-bottom-color: $background-dark;
      }

      &::before {
        border-bottom-color: $border-color-dark;
      }
    }

    &.is-light {
      &::after {
        border-bottom-color: $background-light;
      }

      &::before {
        border-bottom-color: $border-color-light;
      }
    }
  }

  &.position-top {
    // take into account arrow-size for positioning
    margin-top: -($arrow-size + 1);

    &::after,
    &::before {
      top: 100%;
    }

    &.is-dark {
      &::after {
        border-top-color: $background-dark;
      }

      &::before {
        border-top-color: $border-color-dark;
      }
    }

    &.is-light {
      &::after {
        border-top-color: $background-light;
      }

      &::before {
        border-top-color: $border-color-light;
      }
    }
  }

  &.anchor-start::after,
  &.anchor-start::before {
    left: $border-radius;
  }

  &.anchor-center {
    &::after,
    &::before {
      left: 50%;
    }

    &::after {
      margin-left: -$arrow-size;
    }

    &::before {
      margin-left: -$arrow-size - 1;
    }
  }

  &.anchor-end::after,
  &.anchor-end::before {
    right: $border-radius;
  }

  &::before {
    margin-left: -1px;
  }
}
