$tooltip-background: var(--tooltip-background-color, #383838);
$tooltip-error-color: var(--color-shade-error, #b34e4d);
$tooltip-info-color: var(--color-shade-info, #3986ac);
$tooltip-warning-color: var(--color-shade-warning, #c09854);
$tooltip-success-color: var(--color-shade-success, #458746);

@mixin tooltip-pointer($color) {
  &.top-right:before,
  &.top-left:before,
  &.top:before {
    border-top-color: $color;
  }
  &.bottom-left::before,
  &.bottom-right:before,
  &.bottom:before {
    border-bottom-color: $color;
  }
  &.left:before {
    border-left-color: $color;
  }
  &.right:before {
    border-right-color: $color;
  }
}

:host {
  div {
    background: $tooltip-background;
    color: var(--color-white, #fff);
    border-radius: var(--tooltip-border-radius, 4px);
    padding: 8px 10px;
    font-size: 12px;
    line-height: 12px;
    white-space: nowrap;
    box-shadow: var(--shadow-2);

    &.error {
      background-color: $tooltip-error-color;
      @include tooltip-pointer($tooltip-error-color);
    }
    &.info {
      background-color: $tooltip-info-color;
      @include tooltip-pointer($tooltip-info-color);
    }
    &.warning {
      background-color: $tooltip-warning-color;
      @include tooltip-pointer($tooltip-warning-color);
    }
    &.success {
      background-color: $tooltip-success-color;
      @include tooltip-pointer($tooltip-success-color);
    }

    //Arrow positions
    @include tooltip-pointer($tooltip-background);

    &.top:before {
      margin-bottom: -11px;
      left: calc(50% - 6px);
      bottom: 0;
    }

    &.top-left:before {
      margin-right: 0;
      margin-bottom: -11px;
      right: 1px;
      bottom: 0;
    }

    &.top-right:before {
      margin-left: 0;
      margin-bottom: -11px;
      left: 1px;
      bottom: 0;
    }

    &.bottom:before {
      margin-top: -11px;
      left: calc(50% - 6px);
      top: 0;
    }

    &.bottom-left:before {
      margin-right: 0;
      margin-top: -11px;
      right: 1px;
      top: 0;
    }

    &.bottom-right:before {
      margin-left: 0;
      margin-top: -11px;
      left: 1px;
      top: 0;
    }

    &.left:before {
      margin-right: -11px;
      margin-bottom: -6px;
      right: 0;
      bottom: 50%;
    }

    &.right:before {
      left: 0;
      bottom: 50%;
      margin-left: -11px;
      margin-bottom: -6px;
    }

    &:before {
      content: "";
      position: absolute;
      background: 0 0;
      border: 6px solid transparent;
      box-sizing: border-box;
    }

    // Sizing
    &.extra-large,
    &.large,
    &.small,
    &.medium {
      white-space: normal;
      line-height: 1.4em;
      word-wrap: break-word;
    }
    &.extra-large {
      width: 400px;
      font-size: 1.2vh;
    }
    &.large {
      width: 300px;
    }
    &.medium {
      width: 150px;
    }
    &.small {
      width: 80px;
    }
    &.preline {
      white-space: pre-line;
    }

    // Bounce
    &.bounce {
      animation: bounce 0.75s ease-in-out infinite;
    }

    @keyframes bounce {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(0px);
      }
    }
  }
}