$root: FlatPopoverPanel;

@keyframes popover-appear {
  from {
    opacity: 0;
    transform: scale(0);
    transform-origin: top;
  }
  to {
    opacity: 1;
    transform: scale(1);
    transform-origin: top;
  }
}

:global(.#{$root}) {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  background: #2f313f;
  border-radius: 5px;
  left: var(--#{$root}-left, 0);
  top: var(--#{$root}-top, 0);
  z-index: var(--#{$root}-zIndex, 2);
  padding: 1.4rem 1.8rem 1.6rem;
  animation: popover-appear 200ms;

  &:before {
    content: '';
    position: absolute;
    background: inherit;
    width: 1.6rem;
    height: 1.6rem;
    top: 0;
    transform: translateY(-40%) rotate(45deg);
  }
}

.arrowLeft {
  &:before {
    left: 2rem;
  }
}

.arrowRight {
  &:before {
    right: 4rem;
  }
}

:export {
  root: $root;
}