@use '../base/token';
@use '../abstract';

$tooltip-btn-size: (
  12: 12px,
  14: 14px,
  16: 16px,
  18: 18px,
  20: 20px,
  24: 24px,
  28: 28px,
);

.cds-tooltip {
  @include abstract.absolute();

  z-index: 1;
  box-shadow: var(--shadow-lg);
  color: var(--base-white);
  text-align: center;
  font-size: var(--font-size-0);
  font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
  line-height: abstract.division(token.$line-heights-10, token.$font-size-0); // 18
  box-shadow: var(--shadow-lg);
  white-space: pre-line;
  word-break: keep-all;
  border-radius: 8px;
  background-color: var(--gray-700);
  padding: 8px 12px;

  &::after {
    @include abstract.absolute();

    content: '';
    width: 12px;
    height: 12px;
    background-color: inherit;
  }

  // modifier
  // ==========================================
  &--bottom-center::after {
    transform-origin: center;
    transform: translateX(-50%) rotate(45deg);
    left: 50%;
    bottom: -6px;
  }
}

.cds-tooltip2 {
  $this: &;

  @include abstract.relative();
  cursor: pointer;

  &__btn:hover + &__content {
    display: block;
  }

  &--mobile #{$this}__btn:hover + &__content {
    display: none;
  }

  &--mobile-visible &__content {
    display: block !important;
  }

  &__content {
    @include abstract.absolute();
    z-index: 10;
    display: none;
    bottom: 100%;
    color: var(--base-white);
    font-size: token.$font-size-0;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    line-height: line-heights-9 + px;
    box-shadow: var(--shadow-lg);
    background-color: var(--gray-700);
    padding: 12px;
    white-space: pre-line;
    word-break: keep-all;
    border-radius: 8px;
    text-align: center;
    width: max-content;

    &::after {
      @include abstract.absolute();

      content: '';
      width: 12px;
      height: 12px;
      background-color: var(--gray-700);
    }
  }

  // modifier
  // ==========================================
  &--bottom-center {
    #{$this}__content {
      left: 50%;
      transform: translateX(-50%) translateY(-12px);
    }

    #{$this}__content::after {
      transform-origin: center;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      top: 100%;
      left: 50%;
    }
  }

  &--bottom-left {
    #{$this}__content {
      left: -20px;
      transform: translateX(0%) translateY(-12px);
    }

    #{$this}__content::after {
      transform-origin: center;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      top: 100%;
      left: 28px;
    }
  }

  &--left {
    #{$this}__content {
      right: -20px;
      transform: translateX(0%) translateY(-30%);
    }

    #{$this}__content::after {
      transform-origin: center;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      top: 100%;
      right: 16px;
    }
  }

  // NOTE: 추후 Tooltip2 컴포넌트 및 arrows 방향 리팩토링 필요
  &--bottom-right {
    #{$this}__content {
      top: 100%;
      bottom: auto;
      right: -20px;
      transform: translateX(0%) translateY(-12px);
    }

    #{$this}__content::after {
      transform-origin: center;
      transform: translateX(-50%) translateY(50%) rotate(45deg);
      bottom: 100%;
      right: 16px;
    }
  }

  // size
  // ==========================================
  @each $size, $value in $tooltip-btn-size {
    &--size-#{$size} {
      width: $value;
      height: $value;
    }
  }
}