@use '../../../common/scss/global.scss';
@use '~@kyndryl-design-system/shidoka-foundation/scss/mixins/typography.scss';

:host {
  display: inline-block;
}

.tooltip {
  display: block;
  position: relative;
}

button {
  display: block;
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  outline: 2px solid transparent;
  transition: outline-color 150ms ease-out;

  &:focus {
    outline-color: var(--kd-color-border-focus);
  }
}

kd-icon,
slot[name='anchor']::slotted(kd-icon) {
  display: block;
}

.content {
  @include typography.type-body-02;
  font-weight: initial;
  text-transform: initial;
  cursor: initial;
  inline-size: max-content;
  max-inline-size: 288px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate3d(-50%, calc(-100% - 8px), 0);
  background: var(--kd-color-background-ui-strong);
  color: var(--kd-color-text-inversed);
  padding: 24px;
  border-radius: 4px;
  z-index: 2;
  transition: visibility 150ms ease-out, transform 150ms ease-out;
  visibility: hidden;
  transform: translate3d(-50%, calc(-100% - 8px), 0) scale(0);
  transform-origin: center bottom;

  &::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    bottom: -6px;
    left: calc(50% - 6px);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--kd-color-background-ui-strong);
  }

  &.open {
    visibility: visible;
    transform: translate3d(-50%, calc(-100% - 8px), 0) scale(1);
  }

  &.anchor--start {
    transform: translate3d(-14px, calc(-100% - 8px), 0) scale(0);
    transform-origin: left bottom;

    &.open {
      transform: translate3d(-14px, calc(-100% - 8px), 0) scale(1);
    }

    &::before {
      left: 8px;
    }
  }

  &.anchor--end {
    transform: translate3d(14px, calc(-100% - 8px), 0) scale(0);
    left: auto;
    right: 50%;
    transform-origin: right bottom;

    &.open {
      transform: translate3d(14px, calc(-100% - 8px), 0) scale(1);
    }

    &::before {
      left: auto;
      right: 8px;
    }
  }

  &.direction--bottom {
    top: auto;
    bottom: 0;
    transform: translate3d(-50%, calc(100% + 8px), 0) scale(0);
    transform-origin: center top;

    &.open {
      transform: translate3d(-50%, calc(100% + 8px), 0) scale(1);
    }

    &::before {
      bottom: auto;
      top: -6px;
      border-top: none;
      border-bottom: 6px solid var(--kd-color-background-ui-strong);
    }

    &.anchor--start {
      transform: translate3d(-14px, calc(100% + 8px), 0) scale(0);
      transform-origin: left top;

      &.open {
        transform: translate3d(-14px, calc(100% + 8px), 0) scale(1);
      }
    }

    &.anchor--end {
      transform: translate3d(14px, calc(100% + 8px), 0) scale(0);
      transform-origin: right top;

      &.open {
        transform: translate3d(14px, calc(100% + 8px), 0) scale(1);
      }
    }
  }

  &.direction--left {
    top: 50%;
    left: 0;
    transform: translate3d(calc(-100% - 8px), -50%, 0) scale(0);
    transform-origin: center right;

    &.open {
      transform: translate3d(calc(-100% - 8px), -50%, 0) scale(1);
    }

    &::before {
      left: auto;
      right: -6px;
      top: calc(50% - 6px);
      border-left: 6px solid var(--kd-color-background-ui-strong);
      border-bottom: 6px solid transparent;
      border-top: 6px solid transparent;
      border-right: none;
    }

    &.anchor--start {
      transform: translate3d(calc(-100% - 8px), -14px, 0) scale(0);
      transform-origin: top right;

      &.open {
        transform: translate3d(calc(-100% - 8px), -14px, 0) scale(1);
      }

      &::before {
        top: 8px;
      }
    }

    &.anchor--end {
      top: auto;
      bottom: 50%;
      transform: translate3d(calc(-100% - 8px), 14px, 0) scale(0);
      transform-origin: bottom right;

      &.open {
        transform: translate3d(calc(-100% - 8px), 14px, 0) scale(1);
      }

      &::before {
        top: auto;
        bottom: 8px;
      }
    }
  }

  &.direction--right {
    top: 50%;
    left: auto;
    right: 0;
    transform: translate3d(calc(100% + 8px), -50%, 0) scale(0);
    transform-origin: center left;

    &.open {
      transform: translate3d(calc(100% + 8px), -50%, 0) scale(1);
    }

    &::before {
      left: -6px;
      top: calc(50% - 6px);
      border-right: 6px solid var(--kd-color-background-ui-strong);
      border-bottom: 6px solid transparent;
      border-top: 6px solid transparent;
      border-left: none;
    }

    &.anchor--start {
      transform: translate3d(calc(100% + 8px), -14px, 0) scale(0);
      transform-origin: top left;

      &.open {
        transform: translate3d(calc(100% + 8px), -14px, 0) scale(1);
      }

      &::before {
        top: 8px;
      }
    }

    &.anchor--end {
      top: auto;
      bottom: 50%;
      transform: translate3d(calc(100% + 8px), 14px, 0) scale(0);
      transform-origin: bottom left;

      &.open {
        transform: translate3d(calc(100% + 8px), 14px, 0) scale(1);
      }

      &::before {
        top: auto;
        bottom: 8px;
      }
    }
  }
}