.bimdata-textbox {
  display: inline-flex;
  position: relative;

  &__text {
    &--head {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &--tail {
      width: 50%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: "";
      direction: rtl;
    }
  }

  &__tooltip {
    position: absolute;
    z-index: 2;
    min-width: 60px;
    max-width: 200px;
    width: max-content;
    padding: calc(var(--spacing-unit) / 3) calc(var(--spacing-unit) / 2);
    border-radius: 3px;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;

    &::before {
      content: "";
      position: absolute;
      border-style: solid;
      border-width: 8px 0 0 8px;
    }

    &--white {
      background-color: var(--color-white);
      color: var(--color-primary);
      &::before {
        border-color: var(--color-white) transparent transparent;
      }
    }

    &--primary {
      background-color: var(--color-primary);
      color: var(--color-white);
      &::before {
        border-color: var(--color-primary) transparent transparent;
      }
    }

    &--secondary {
      background-color: var(--color-secondary);
      color: var(--color-primary);
      &::before {
        border-color: var(--color-secondary) transparent transparent;
      }
    }

    &--granite-light {
      background-color: var(--color-granite-light);
      color: var(--color-white);
      &::before {
        border-color: var(--color-granite-light) transparent transparent;
      }
    }

    &--silver-light {
      background-color: var(--color-silver-light);
      color: var(--color-primary);
      &::before {
        border-color: var(--color-silver-light) transparent transparent;
      }
    }

    &--top {
      top: -8px;
      left: 50%;
      transform: translateX(-50%) translateY(-100%);
      &::before {
        top: calc(100% - 4px);
        left: calc(50% - 4px);
        transform: rotate(135deg);
      }
    }

    &--right {
      top: 50%;
      left: calc(100% + 8px);
      transform: translateY(-50%);
      &::before {
        top: calc(50% - 4px);
        left: -4px;
        transform: rotate(-135deg);
      }
    }

    &--bottom {
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      &::before {
        top: -4px;
        left: calc(50% - 4px);
        transform: rotate(-45deg);
      }
    }

    &--left {
      top: 50%;
      left: -8px;
      transform: translateX(-100%) translateY(-50%);
      &::before {
        top: calc(50% - 4px);
        left: calc(100% - 4px);
        transform: rotate(45deg);
      }
    }
  }
}