@use "00-base/configure" as *;

.popover {
  display: inline;
  position: relative;

  :where(button) {
    appearance: none;
    border: none;
    background-color: transparent;
    margin: 0;
    padding: 0;
  }

  &__trigger {
    color: var(--mf-c-primary);
    display: inline;

    &:after {
      content: "";
      position: absolute;
      border-bottom: 3px dashed currentcolor;
      pointer-events: none;
      bottom: -4px;
      left: 0;
      width: 100%;
    }

    &:hover {
      color: var(--mf-c-primary-light);
      cursor: pointer;
      border-bottom-width: 4px;
    }
  }

  &__dialog {
    background: var(--mf-c-white);
    border: 1px solid var(--mf-c-gray-light);
    border-radius: 0.5rem;
    width: max-content;
    max-width: min(480px, calc(100vw - 2rem));
    font-size: clamp($fonts-small, 1em, $fonts-large);

    // Use fixed positioning to escape table flow
    position: fixed;

    // Will be positioned by JavaScript
    left: var(--popover-x, 0);
    top: var(--popover-y, 0);

    // Hide by default
    visibility: hidden;
    opacity: 0;

    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto 2.75rem;
    grid-template-areas: "title close" "content content";
    box-shadow: 0 0.75rem 3rem rgba(0, 0, 0, 0.16);
    z-index: $z-skyline;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  &__caret {
    display: block;
    background: var(--mf-c-white);
    border: 1px solid var(--mf-c-gray-light);
    width: 1rem;
    height: 1rem;
    rotate: -45deg;
    clip-path: polygon(0 0, 100% 100%, 100% 0);

    // Also use fixed positioning
    position: fixed;
    z-index: $z-skyline + 1;

    // Will be positioned by JavaScript
    left: var(--caret-x, 0);
    top: var(--caret-y, 0);

    // Hide by default (same as dialog)
    visibility: hidden;
    opacity: 0;

    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  &__close {
    grid-area: close;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mf-c-primary);
    border-start-end-radius: 0.5rem;

    svg {
      color: var(--mf-c-primary);
      pointer-events: none;
    }

    &:hover {

      svg {
        color: var(--mf-c-primary-light);
      }
    }
  }

  &__title {
    font-weight: $fonts-bolder;
    line-height: 1.35;
    padding: 0.75rem 1rem;
    width: 100%;
    grid-area: title;
  }

  &__body {
    font-weight: $fonts-normal;
    line-height: 1.63;
    grid-area: content;
    padding: 1rem;
    border-top: 1px solid var(--mf-c-gray-light);
  }

  &--open {

    .popover__dialog,
    .popover__caret {

      visibility: visible;
      opacity: 1;
    }
  }
}