$arrow-size: rem(14px);
$visible-portion-of-arrow: rem(5px);
$content-max-height: rem(295px);
$content-max-width: rem(400px);

.Polaris-Popover {
  max-width: calc(100vw - #{2 * spacing()});
  margin: $visible-portion-of-arrow spacing() spacing();
  opacity: 1;
  box-shadow: shadow(deep);
  border-radius: border-radius(large);
  will-change: opacity, left, top;
  transition: opacity duration() easing(in);
}

.Polaris-Popover--fullWidth {
  margin: 0;
  margin-top: $visible-portion-of-arrow;

  .Polaris-Popover__Content {
    max-width: none;
  }
}

.Polaris-Popover--measuring:not(.Polaris-Popover--exiting),
.Polaris-Popover--exiting {
  opacity: 0;
}

.Polaris-Popover--measuring {
  .Polaris-Popover__Content {
    display: block;
  }
}

.Polaris-Popover--exiting {
  transition-timing-function: easing(out);
}

.Polaris-Popover--positionedAbove {
  margin: spacing() spacing() $visible-portion-of-arrow;

  .Polaris-Popover__Tip {
    top: inherit;
    bottom: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: border-radius();
  }
}

.Polaris-Popover__Wrapper {
  position: relative;
  overflow: hidden;
  background-color: color(white);
  border-radius: border-radius(large);
}

.Polaris-Popover__Content {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: border-radius(large);
  max-width: $content-max-width;
  max-height: $content-max-height;

  &:focus {
    outline: none;
  }
}

.Polaris-Popover__Tip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  height: $arrow-size;
  width: $arrow-size;
  background: color(white);
  border-top-left-radius: border-radius();
  box-shadow: shadow(deep);
}

.Polaris-Popover__Pane {
  flex: 1 1 0%;
  max-width: 100%;

  + .Polaris-Popover__Pane {
    border-top: border();
  }
}

.Polaris-Popover__Pane--fixed {
  overflow: visible;
  flex: 0 0 auto;
}

.Polaris-Popover__Section {
  padding: spacing();

  + .Polaris-Popover__Section {
    border-top: border();
  }
}

.Polaris-Popover__FocusTracker {
  @include visually-hidden;
}