@import "./properties.css";

.target {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  position: relative;
}

.tooltip {
  color: var(--tooltip-text-color);
  font-size: var(--tooltip-font-size);
  font-weight: var(--tooltip-font-weight);
  line-height: var(--tooltip-line-height);
  padding: var(--tooltip-padding);
  position: absolute;
  text-transform: var(--tooltip-text-transform);
  z-index: var(--tooltip-z-index);
}

.tooltip,
.tooltip:before {
  background-color: var(--tooltip-color);
  border-radius: var(--tooltip-radius);
}

.tooltip:before {
  content: "";
  display: block;
  height: var(--tooltip-arrow-size);
  position: absolute;
  transform: rotate(45deg);
  width: var(--tooltip-arrow-size);
  z-index: var(--tooltip-arrow-z-index);
}

.secondary {
  background-color: var(--tooltip-color-secondary);

  &:before {
    background-color: var(--tooltip-color-secondary);
  }
}

.rightStart {
  top: var(--tooltip-right-start-top);
  left: var(--tooltip-right-start-left);

  &:before {
    right: var(--tooltip-arrow-align-box);
    top: var(--tooltip-arrow-right-start-top);
  }
}

.rightMiddle {
  left: var(--tooltip-right-middle-left);

  &:before {
    right: var(--tooltip-arrow-align-box);
    top: var(--tooltip-arrow-right-middle-top);
  }
}

.rightEnd {
  bottom: var(--tooltip-right-end-bottom);
  left: var(--tooltip-right-end-left);

  &:before {
    bottom: var(--tooltip-arrow-right-end-bottom);
    right: var(--tooltip-arrow-align-box);
  }
}

.leftStart {
  right: var(--tooltip-left-start-right);
  top: var(--tooltip-left-start-top);

  &:before {
    left: var(--tooltip-arrow-align-box);
    top: var(--tooltip-arrow-left-start-top);
  }
}

.leftMiddle {
  right: var(--tooltip-left-middle-right);

  &:before {
    top: var(--tooltip-arrow-right-middle-top);
    left: var(--tooltip-arrow-align-box);
  }
}

.leftEnd {
  bottom: var(--tooltip-left-end-bottom);
  right: var(--tooltip-left-end-right);

  &:before {
    bottom: var(--tooltip-arrow-left-end-bottom);
    left: var(--tooltip-arrow-align-box);
  }
}

.bottomStart {
  left: var(--tooltip-bottom-start-left);
  top: var(--tooltip-bottom-start-top);

  &:before {
    bottom: var(--tooltip-arrow-align-box);
    left: var(--tooltip-arrow-bottom-start-left);
  }
}

.bottomCenter {
  top: var(--tooltip-bottom-center-top);

  &:before {
    bottom: var(--tooltip-arrow-align-box);
    left: var(--tooltip-arrow-bottom-center-left);
  }
}

.bottomEnd {
  right: var(--tooltip-bottom-end-right);
  top: var(--tooltip-bottom-end-top);

  &:before {
    bottom: var(--tooltip-arrow-align-box);
    right: var(--tooltip-arrow-bottom-end-right);
  }
}

.topStart {
  left: var(--tooltip-top-start-left);
  bottom: var(--tooltip-top-start-bottom);

  &:before {
    top: var(--tooltip-arrow-align-box);
    left: var(--tooltip-arrow-top-start-left);
  }
}

.topCenter {
  bottom: var(--tooltip-top-center-bottom);

  &:before {
    top: var(--tooltip-arrow-align-box);
    left: var(--tooltip-arrow-top-center-left);
  }
}

.topEnd {
  right: var(--tooltip-top-end-right);
  bottom: var(--tooltip-top-end-bottom);

  &:before {
    top: var(--tooltip-arrow-align-box);
    right: var(--tooltip-arrow-top-end-right);
  }
}