@use './_theme';

$breakpoint-compact: theme.$sm;

.popover-offset-parent {
  position: relative;
}

.popover-content {
  background: var(--color-error-fill);
  border: 1px solid var(--color-error);
  border-radius: 5px;
  bottom: calc(100% + 12px);
  color: var(--text-color-ultra-dark);
  display: flex;
  font-size: var(--text-size-regular);
  gap: 10px;
  left: 50%;
  max-width: 220px;
  padding: 15px;
  position: absolute;
  translate: -50% 0;
  width: 100%;

  &::after {
    $size: 9px;
    background: inherit;
    border-bottom: inherit;
    border-right: inherit;
    bottom: calc($size / -2 - 1.1px);
    content: '';
    height: $size;
    left: calc(50% - $size / 2);
    position: absolute;
    rotate: 45deg;
    width: $size;
  }
}
