/*
tooltip 사용법
- tooltip-box-container 와 tooltip-arrow-container 두 가지 클래스를 사용합니다.
- 두 클래스를 개별적으로 선언하고 위치를 조정해 툴팁을 만듭니다.

1. tooltip-box-container 클래스를 가진 div 태그를 만든다.
2. tooltip-box-container 클래스를 가진 div 태그 안에 tooltip 클래스를 가진 div 태그를 만든다.
3. tooltip-box-container 클래스를 가진 div 태그 안에 style 속성을 이용하여 div 태그의 위치를 조정한다.
4. tooltip-box-container 클래스를 가진 div 태그 안에 text 등을 넣는다.

5. tooltip-arrow-container 클래스를 가진 div 태그를 만든다.
6. tooltip-arrow-container 클래스를 가진 div 태그 안에 tooltip-arrow-border 클래스를 가진 div 태그를 만든다.
7. tooltip-arrow-container 클래스를 가진 div 태그 안에 tooltip-arrow-content 클래스를 가진 div 태그를 만든다.
8. tooltip-arrow-container 클래스를 가진 div 태그 안에 style 속성을 이용하여 div 태그의 위치를 조정한다.
*/

.tootip-box-container {
  position: relative;
}

.tootip-box-container .tooltip {
  background: #fff;
  color: var(--gray-900);
  display: block;
  opacity: 1;
  position: absolute;
  padding: var(--sp-3);
  border-radius: 100px;
  border: 1px solid #000;
  z-index: 1000;
}

.tooltip-arrow-container {
  position: relative;
  z-index: 1001;
}

.tooltip-arrow-container>.tooltip-arrow-border {
  border-left: solid transparent 9px;
  border-right: solid transparent 9px;
  border-top: solid #000 9px;
  bottom: 0px;
  content: " ";
  position: absolute;
  z-index: 1;
}

.tooltip-arrow-container>.tooltip-arrow-content {
  border-left: solid transparent 9px;
  border-right: solid transparent 9px;
  border-top: solid #fff 9px;
  bottom: 1.414px;
  content: " ";
  position: absolute;
  z-index: 2;
}

.absolute-horizontal-center {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}