/* This is necessary to override the position of the popover on the page. By default, an HTML popover will
   render in the middle of the screen, which we do not want */
:popover-open {
  position: absolute;
  inset: unset;
}

.gux-popover-wrapper {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  padding: var(--gse-ui-popover-padding);
  overflow: hidden;
  color: var(--gse-semantic-foreground-container-highEmphasis);
  background-color: var(--gse-ui-popover-backgroundColor);
  border: none;
  border-radius: var(--gse-ui-popover-borderRadius);
  box-shadow: var(--gse-ui-popover-boxShadow);
}
.gux-popover-wrapper .gux-arrow {
  position: absolute;
  inline-size: var(--gse-ui-popover-anchor-width);
  block-size: var(--gse-ui-popover-anchor-height);
  /* 4px padding leaves some space for the shadow to bleed into */
  padding-block-end: 4px;
  overflow: hidden;
}
.gux-popover-wrapper {
  /* // TODO: COMUI-3210 - Arrow currently does not show  */
}
.gux-popover-wrapper .gux-arrow-caret {
  inline-size: 0;
  block-size: 0;
  border-block-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);
  border-inline-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
  border-inline-end: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
  filter: drop-shadow(0 0 4px var(--gse-semantic-effects-boxShadow));
}
.gux-popover-wrapper .gux-popover-header {
  display: flex;
  flex-direction: row;
  place-content: center space-between;
  align-items: center;
  padding-block-end: var(--gse-ui-popover-gap);
  font-family: var(--gse-ui-popover-title-text-fontFamily);
  font-size: var(--gse-ui-popover-title-text-fontSize);
  font-weight: var(--gse-ui-popover-title-text-fontWeight);
  line-height: var(--gse-ui-popover-title-text-lineHeight);
  color: var(--gse-ui-popover-headerColor);
}
.gux-popover-wrapper .gux-popover-footer {
  padding-block-start: var(--gse-ui-popover-gap);
}