@use "../../assets/scss/mixins/_font-size.scss";

.bimdata-tooltip {
  position: relative;

  &__tooltip {
    position: absolute;
    z-index: 2;
    min-width: 60px;
    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;
    }

    // --- Position styles ---
    &.bimdata-tooltip--up, // retro-compatibility
    &--top {
      top: -8px;
      left: 50%;
      transform: translateX(-50%) translateY(-100%);
      &::before {
        top: calc(100% - 4px);
        left: calc(50% - 4px);
        transform: rotate(135deg);
      }
    }

    &.bimdata-tooltip--left, // retro-compatibility
    &--right {
      top: 50%;
      left: calc(100% + 8px);
      transform: translateY(-50%);
      &::before {
        top: calc(50% - 4px);
        left: -4px;
        transform: rotate(-135deg);
      }
    }

    &.bimdata-tooltip--bottom, // retro-compatibility
    &--bottom {
      top: calc(100% + 8px);
      left: 50%;
      transform: translateX(-50%);
      &::before {
        top: -4px;
        left: calc(50% - 4px);
        transform: rotate(-45deg);
      }
    }

    &.bimdata-tooltip--right, // retro-compatibility
    &--left {
      top: 50%;
      left: -8px;
      transform: translateX(-100%) translateY(-50%);
      &::before {
        top: calc(50% - 4px);
        left: calc(100% - 4px);
        transform: rotate(45deg);
      }
    }

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

    &.bimdata-tooltip--primary, // retro-compatibility
    &--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;
      }
    }

    &.bimdata-tooltip--grey, // retro-compatibility
    &--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;
      }
    }

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

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

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