.tooltip {
  display: inline-block;
}

.content {
  composes: box from './Box.module.css';
  padding: calc(var(--spacer) / 4);
  max-width: 25rem;
  font-size: var(--font-size-small);
}

.icon {
  width: 1rem;
  height: 1rem;
  cursor: help;
  display: inline-block;
  margin-bottom: -0.1rem;
  margin-left: calc(var(--spacer) / 6);
  fill: var(--color-secondary);
}

.arrow,
.arrow::before {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  z-index: -1;
}

.arrow::before {
  content: '';
  transform: rotate(45deg);
  background: var(--border-color);
}

.content[data-placement*='top'] > .arrow {
  bottom: -4px;
}

.content[data-placement*='bottom'] > .arrow {
  top: -4px;
}

.content[data-placement*='left'] > .arrow {
  right: 6px;
}

.content[data-placement*='right'] > .arrow {
  left: -4px;
}