@import 'src/styles/variables';

@keyframes appear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100;
  }
}

$row_height: 24px;

.window {
  @include outer_shadow;
  @include blur;

  position: absolute;
  top: -2px;
  right: -2px;
  width: calc(100vw - 15px);
  max-width: 300px;
  background: $content_bg_dark;
  z-index: 10;
  border-radius: 4px;
  animation: appear 0.25s forwards;
  visibility: hidden;
  pointer-events: none;
  touch-action: none;

  &.visible {
    visibility: visible;
    pointer-events: all;
    touch-action: initial;
  }
}

.scroll {
  overflow: hidden;
  padding: 0;
  border-radius: 4px;
}

.arrow {
  @include popper_arrow;
}
