@import '../../mixins/z-index';
@import '../../mixins/box-sizing';

:host {
  position: absolute;
}

.tds-tooltip {
  @include tds-box-sizing;

  font: var(--tds-detail-05);
  letter-spacing: var(--tds-detail-05-ls);
  color: var(--tds-tooltip-color);
  background-color: var(--tds-tooltip-background);
  border-radius: 4px;
  padding: 8px;
  word-wrap: break-word;
  white-space: normal;
  max-width: 192px;
  z-index: tds-z-index(tooltip);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-in, visibility 200ms ease-in;

  &.tds-tooltip-top-left {
    border-radius: 0 4px 4px;
  }

  &.tds-tooltip-top-right {
    border-radius: 4px 0 4px 4px;
  }

  &.tds-tooltip-bottom-right {
    border-radius: 4px 4px 0;
  }

  &.tds-tooltip-bottom-left {
    border-radius: 4px 4px 4px 0;
  }
}

.tds-tooltip-show {
  opacity: 1;
  visibility: visible;
}