@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: $c-primary;
    display: inline;
    border-bottom: 3px dashed currentcolor;

    &:hover {
      color: $c-primary-light;
      cursor: pointer;
      border-bottom-width: 4px;
    }
  }

  &__dialog {
    background: $c-white;
    border: 1px solid $c-gray-light;
    border-radius: 0.5rem;
    width: max-content;
    max-width: min(480px, calc(100vw - 2rem));
    /* stylelint-disable-next-line */
    max-width: min(480px, calc(100svw - 2rem));
    font-size: clamp($fonts-small, 1em, $fonts-large);
    position: absolute;
    inset: calc(100% + 1rem) auto auto 50%;
    translate: -50% 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);
    visibility: hidden;
    z-index: $z-skyline;
  }

  &__caret {
    display: block;
    background: $c-white;
    border: 1px solid $c-gray-light;
    width: 1rem;
    height: 1rem;
    rotate: -45deg;
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    position: absolute;
    inset: calc(100% + 0.56rem) auto auto 50%;
    translate: -50% 0;
    z-index: $z-skyline;
    visibility: hidden;
  }

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

    svg {
      width: 1rem;
      height: 1rem;
      fill: $c-primary;
      pointer-events: none;
    }

    &:hover {

      svg {
        fill: $c-primary-light;
      }
      // background-color: $c-gray-lightest;
    }
  }

  &__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 $c-gray-light;
  }

  &--open {

    .popover__dialog,
    .popover__caret {
      visibility: visible;
    }
  }
}