/*
  parts, in this order, all optional except content: .a-popover > .a-popover-title,
  .a-popover-close (an .a-btn--tertiary.a-btn--xs), .a-popover-content,
  .a-popover-footer > .a-popover-pagination + .a-popover-buttons
  the close sits beside the title, or beside the content when there is no title
  
  top layer: `<div class="a-popover" popover="auto" role="dialog" aria-labelledby="…"
  style="position-anchor: --x">`, with `anchor-name: --x` on the trigger and
  command="toggle-popover" / command="hide-popover" invokers. Without `popover` it renders in place.
  
  placement: .a-popover--{top|bottom|left|right|top-start|top-end|bottom-start|bottom-end}
  (bottom-start default); flips to the opposite side when there is no room.
  gap from the anchor: --a-popover-target-gap
*/

.a-popover {
  --pl: var(--lens-semantic-spacing-desktop-padding-3);
  --pr: var(--lens-semantic-spacing-desktop-padding-2);
  --pt: var(--lens-semantic-spacing-desktop-padding-2-5);
  display: grid;
  box-sizing: border-box;
  row-gap: var(--lens-semantic-spacing-desktop-gap-1-5);
  column-gap: var(--lens-semantic-spacing-desktop-gap-1);
  max-width: var(--a-popover-max-width, 400px);
  padding-block-start: var(--pt);
  padding-block-end: 0;
  padding-inline-start: var(--pl);
  padding-inline-end: var(--pr);
  background-color: var(--lens-semantic-color-surface-inverse);
  color: var(--lens-semantic-color-type-inverse);
  box-shadow: var(--lens-semantic-shadow-medium);
  border-radius: var(--a-popover-radius, var(--lens-semantic-radius-lg));
  grid-template-columns: auto;
  place-items: flex-start stretch;
  &:has(.a-popover-title) {
    --pt: var(--lens-semantic-spacing-desktop-padding-2);
  }
  &:has(.a-popover-title + .a-popover-close) {
    grid-template-columns: auto min-content;
    & .a-popover-title {
      grid-column: 1;
    }
    & .a-popover-close {
      grid-column: 2;
    }
    & .a-popover-content {
      grid-column-start: 1;
      grid-column-end: -1;
    }
    & .a-popover-footer {
      grid-column-start: 1;
      grid-column-end: -1;
    }
  }
  &:has(.a-popover-close + .a-popover-content) {
    grid-template-columns: auto min-content;
    & .a-popover-content {
      margin-inline-end: var(--lens-semantic-spacing-desktop-padding-1);
    }
    &:not(:has(.a-popover-title)) {
      & .a-popover-content {
        grid-row: 1;
        grid-column: 1;
        margin-inline-end: var(--lens-semantic-spacing-desktop-padding-0);
      }
      & .a-popover-close {
        grid-row: 1;
        grid-column: 2;
      }
      & .a-popover-footer {
        grid-column-start: 1;
        grid-column-end: -1;
      }
    }
  }
  & .a-popover-close {
    place-self: flex-start flex-end;
  }
  & .a-popover-content {
    margin-block-end: var(--lens-semantic-spacing-desktop-padding-1-5);
    &:not(:has(+ .a-popover-footer)) {
      margin-block-end: var(--lens-semantic-spacing-desktop-padding-3);
    }
  }
  & .a-popover-footer {
    margin-inline-start: calc(-1 * var(--pl));
    margin-inline-end: calc(-1 * var(--pr));
    padding-inline-start: var(--lens-semantic-spacing-desktop-padding-3);
    padding-inline-end: var(--lens-semantic-spacing-desktop-padding-2);
    padding-block: var(--lens-semantic-spacing-desktop-padding-2);
    border-top-color: var(--lens-semantic-color-ui-divider-default);
    border-top-style: var(--lens-core-border-style-solid);
    border-top-width: var(--lens-semantic-border-width-thin);
  }
  & .a-btn.a-btn--tertiary {
    --color: var(--lens-semantic-color-action-secondary-inverse-on-secondary-inverse);
    &:hover {
      --bg: var(--lens-semantic-color-action-secondary-inverse-hover);
    }
    &:active,
    &.a-btn--active {
      --bg: var(--lens-semantic-color-action-secondary-inverse-active);
    }
    &[disabled],
    &[aria-disabled="true"] {
      --color: var(--lens-semantic-color-action-secondary-inverse-on-secondary-inverse-disabled);
    }
  }
  &[popover] {
    inset: auto;
    border: none;
    display: none;
    position-area: block-end span-inline-end;
    margin: 0;
    margin-block-start: var(--a-popover-target-gap, var(--lens-core-spacing-0-5));
    position-try:
      flip-block,
      flip-inline,
      flip-block flip-inline;
    opacity: 0;
    scale: 0.98;
    transition:
      opacity var(--a-transition-duration) var(--a-transition-easing),
      scale var(--a-transition-duration) var(--a-transition-easing),
      overlay var(--a-transition-duration) var(--a-transition-easing) allow-discrete,
      display var(--a-transition-duration) var(--a-transition-easing) allow-discrete;
    &:popover-open {
      display: grid;
      opacity: 1;
      scale: 1;
    }
    &.a-popover--top {
      position-area: top;
      margin: 0;
      margin-block-end: var(--a-popover-target-gap, var(--lens-core-spacing-0-5));
    }
    &.a-popover--bottom {
      position-area: bottom;
      margin: 0;
      margin-block-start: var(--a-popover-target-gap, var(--lens-core-spacing-0-5));
    }
    &.a-popover--left {
      position-area: left;
      margin: 0;
      margin-right: var(--a-popover-target-gap, var(--lens-core-spacing-0-5));
    }
    &.a-popover--right {
      position-area: right;
      margin: 0;
      margin-left: var(--a-popover-target-gap, var(--lens-core-spacing-0-5));
    }
    &.a-popover--top-start {
      position-area: block-start span-inline-end;
      margin: 0;
      margin-block-end: var(--a-popover-target-gap, var(--lens-core-spacing-0-5));
    }
    &.a-popover--top-end {
      position-area: block-start span-inline-start;
      margin: 0;
      margin-block-end: var(--a-popover-target-gap, var(--lens-core-spacing-0-5));
    }
    &.a-popover--bottom-start {
      position-area: block-end span-inline-end;
      margin: 0;
      margin-block-start: var(--a-popover-target-gap, var(--lens-core-spacing-0-5));
    }
    &.a-popover--bottom-end {
      position-area: block-end span-inline-start;
      margin: 0;
      margin-block-start: var(--a-popover-target-gap, var(--lens-core-spacing-0-5));
    }
  }
}

.a-popover-title {
  margin: 0;
  box-sizing: border-box;
  color: inherit;
  font-size: var(--a-popover-title-font-size, var(--lens-semantic-font-title-h4-md-font-size));
  line-height: var(
    --a-popover-title-line-height,
    var(--lens-semantic-font-title-h4-md-line-height)
  );
  letter-spacing: var(
    --a-popover-title-letter-spacing,
    var(--lens-semantic-font-title-h4-md-letter-spacing)
  );
  font-weight: var(--a-popover-title-font-weight, var(--lens-semantic-font-weight-emphasis));
  &:is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
    font-size: var(--a-popover-title-font-size, var(--lens-semantic-font-title-h4-md-font-size));
    line-height: var(
      --a-popover-title-line-height,
      var(--lens-semantic-font-title-h4-md-line-height)
    );
    letter-spacing: var(
      --a-popover-title-letter-spacing,
      var(--lens-semantic-font-title-h4-md-letter-spacing)
    );
    font-weight: var(--a-popover-title-font-weight, var(--lens-semantic-font-weight-emphasis));
  }
}

.a-popover-content {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  margin: 0;
  color: inherit;
  font-size: var(--a-popover-font-size, var(--lens-semantic-font-text-body-font-size));
  line-height: var(--a-popover-line-height, var(--lens-semantic-font-text-body-line-height));
  letter-spacing: var(
    --a-popover-letter-spacing,
    var(--lens-semantic-font-text-body-letter-spacing)
  );
  font-weight: var(--a-popover-font-weight, var(--lens-semantic-font-weight-regular));
  &:is(p),
  p {
    color: inherit;
    font-size: var(--a-popover-font-size, var(--lens-semantic-font-text-body-font-size));
    line-height: var(--a-popover-line-height, var(--lens-semantic-font-text-body-line-height));
    letter-spacing: var(
      --a-popover-letter-spacing,
      var(--lens-semantic-font-text-body-letter-spacing)
    );
    font-weight: var(--a-popover-font-weight, var(--lens-semantic-font-weight-regular));
  }
}

.a-popover-footer {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  color: inherit;
  &:has(.a-popover-pagination + .a-popover-buttons) {
    justify-content: space-between;
  }
}

.a-popover-pagination {
  display: flex;
  box-sizing: border-box;
  margin: 0;
  font-size: var(--a-popover-pagination-font-size, var(--lens-semantic-font-text-md-font-size));
  line-height: var(
    --a-popover-pagination-line-height,
    var(--lens-semantic-font-text-md-line-height)
  );
  letter-spacing: var(
    --a-popover-pagination-letter-spacing,
    var(--lens-semantic-font-text-md-letter-spacing)
  );
  font-weight: var(--a-popover-pagination-font-weight, var(--lens-semantic-font-weight-regular));
  color: inherit;
}

.a-popover-buttons {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: var(--lens-semantic-spacing-desktop-gap-1);
}

@starting-style {
  .a-popover[popover]:popover-open {
    opacity: 0;
    scale: 0.98;
  }
}