@import '../../styles/_variables.scss';

$arrow-size: 15px;

.popover {
  box-sizing: border-box;
  position: fixed;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background-color: $header-background;
  border: 1px solid $duda-gray;
  border-radius: 3px;
  padding: 15px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease;

  &.shown {
    opacity: 1;
    pointer-events: auto;
  }

  &:after,
  &:before {
    position: absolute;
    left: 20%;
    width: 0;
    height: 0;
    content: '';

    border: $arrow-size solid transparent;
    border-bottom: none;
  }

  &:before {
    bottom: -$arrow-size - 1px;
    border-top-color: $duda-gray;
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.2));
  }

  &:after {
    bottom: -$arrow-size;
    border-top-color: $header-background;
  }
}