/* Works with app/javascript/controllers/card_popover_controller.js */
.cards-popover {
  position: relative;

  &.cards-popover--selected {
    .cards-popover__item {
      box-shadow: -2px 4px 4px rgba(128, 128, 128, 0.25);
      max-height: fit-content;
      opacity: 1;
      visibility: visible;
    }
  }

  .cards-popover__item {
    border-radius: var(--border-radius); /* Same as .card */
    max-height: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out;
    visibility: hidden;
    z-index: 2;

    &> .card:hover {
      background-color: var(--off-white);
    }

    /* MODIFIER I: Direction */
    &.cards-popover__item--left {
      left: 0;
      transform: translate(calc(-100% - 0.25rem), 0.5rem);

      .card {
        border-top-right-radius: 0;
      }
    }

    &.cards-popover__item--right {
      right: 0;
      transform: translate(calc(100% + 0.25rem), 0.5rem);

      .card {
        border-top-left-radius: 0;
      }
    }
  }
}

*:has(> .popover) {
  cursor: pointer;
  position: relative;

  &:has(tooltip):has(.popover--active) tooltip {
    opacity: 0;
    z-index: 1;
  }

  .popover {
    --arrow-size: 0.25rem;
    background-color: var(--off-white);
    border: 1px solid var(--ink-50);
    border-radius: var(--border-radius);
    box-shadow: 0.25rem 0.25rem 0.25rem rgba(226, 226, 226, 0.25);
    padding: 0.5rem;
    position: absolute;
    z-index: 3;
    top: calc(100% + 1rem - var(--arrow-size));
    width: fit-content;
    max-width: var(--container-s);
    left: calc(100% - (1rem + 3rem + 0.5rem)); /* card left padding + avatar width + header gap *!*/
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;

    &:before {
      content: "";
      position: absolute;
      left: calc(1rem + 3rem - var(--arrow-size));
      top: calc((var(--arrow-size) * 2) * -1);
      width: 0;
      height: 0;
      border-right: var(--arrow-size) solid transparent;
      border-bottom: calc(var(--arrow-size) * 2) solid var(--ink-50);
      border-left: var(--arrow-size) solid transparent;
      z-index: 2;
    }

    &.popover--active {
      visibility: visible;
      opacity: 1;
    }
  }
}