.arrow > svg {
  display: block;
}

[data-placement="left"] .arrow,
[data-placement="left top"] .arrow,
[data-placement="left bottom"] .arrow {
  transform: rotate(270deg);
}

[data-placement="right"] .arrow,
[data-placement="right top"] .arrow,
[data-placement="right bottom"] .arrow {
  transform: rotate(90deg);
}

[data-placement="bottom"] .arrow,
[data-placement="bottom left"] .arrow,
[data-placement="bottom right"] .arrow {
  transform: rotate(180deg);
}

.small {
  width: 14px;
  height: 8px;
}

.medium {
  width: 27px;
  height: 13px;
}

.black {
  fill: var(--Surface-UI-Fill-Intense);
}

.white {
  fill: var(--Surface-UI-Fill-Default);
}