$cy-tooltip-class: 'tooltip' !default;
$cy-tooltip-background-color: #111 !default;
$cy-tooltip-color: #FFF !default;
$cy-tooltip-border-color: #111 !default;
$cy-tooltip-border-width: 1px !default;
$arrow-size: 5px !default;

.#{$cy-tooltip-class} {
  background: $cy-tooltip-background-color;
  border: solid $cy-tooltip-border-width $cy-tooltip-border-color;
  border-radius: 3px;
  color: $cy-tooltip-color;
  display: inline-block;
  font-size: 12px;
  left: 0;
  max-width: 200px;
  padding: 4px 6px;
  text-align: center;
  top: 0;
  z-index: 100;
}

.#{$cy-tooltip-class}-arrow {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;

  svg {
    fill: $cy-tooltip-background-color;
    position: relative;
    stroke: $cy-tooltip-border-color;
    stroke-width: $cy-tooltip-border-width;
  }
}

.#{$cy-tooltip-class}-top,
.#{$cy-tooltip-class}-top-start,
.#{$cy-tooltip-class}-top-end {
  margin-bottom: $arrow-size;

  .#{$cy-tooltip-class}-arrow {
    bottom: -$arrow-size - $cy-tooltip-border-width;
    height: $arrow-size + $cy-tooltip-border-width;
    width: $arrow-size * 2 + $cy-tooltip-border-width * 2;

    svg {
      top: -$arrow-size;
    }
  }
}

.#{$cy-tooltip-class}-right,
.#{$cy-tooltip-class}-right-start,
.#{$cy-tooltip-class}-right-end {
  margin-left: $arrow-size;

  .#{$cy-tooltip-class}-arrow {
    left: -$arrow-size - $cy-tooltip-border-width;
    height: $arrow-size * 2 + $cy-tooltip-border-width * 2;
    width: $arrow-size + $cy-tooltip-border-width;
  }
}

.#{$cy-tooltip-class}-left,
.#{$cy-tooltip-class}-left-start,
.#{$cy-tooltip-class}-left-end {
  margin-right: $arrow-size;

  .#{$cy-tooltip-class}-arrow {
    right: -$arrow-size - $cy-tooltip-border-width;
    height: $arrow-size * 2 + $cy-tooltip-border-width * 2;
    width: $arrow-size + $cy-tooltip-border-width;

    svg {
      left: -$arrow-size;
    }
  }
}

.#{$cy-tooltip-class}-bottom,
.#{$cy-tooltip-class}-bottom-start,
.#{$cy-tooltip-class}-bottom-end {
  margin-top: $arrow-size;

  .#{$cy-tooltip-class}-arrow {
    height: $arrow-size + $cy-tooltip-border-width;
    top: -$arrow-size - $cy-tooltip-border-width;
    width: $arrow-size * 2 + $cy-tooltip-border-width * 2;
  }
}