/*
 * AssigneesComponent: the avatars of whoever is assigned, then a round "+"
 * (Assign) that opens a popover of every user who can see Strategy. In the
 * popover an assigned user is ringed and ticked; clicking toggles.
 */
@layer components {
  .assignees {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);

    /* The base rhythm (ul + * gets a top margin) must not push the "+" down. */
    & > * {
      margin: 0;
    }
  }

  .assignees__list {
    display: flex;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;

    /* Flex items, so an avatar sits in no line box and centres exactly. */
    & > li {
      display: flex;
    }

    & > li + li {
      margin: 0;
    }
  }

  /* The Assign button: a "+" in a circle, the size of a small avatar. */
  .assignees__add {
    display: inline-grid;
    place-items: center;
    inline-size: var(--space-6);
    block-size: var(--space-6);
    min-block-size: auto;
    padding: 0;
    border: 1px solid var(--color-subtle);
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    font: var(--text-body-strong);
    line-height: 1;
    cursor: pointer;

    &:hover {
      border-color: var(--color-ink);
      background: var(--color-paper);
      color: var(--color-ink);
    }
  }

  .popover.assignees__popover {
    inline-size: auto;
    max-inline-size: 20rem;
  }

  .assignees__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;

    & > li + li {
      margin: 0;
    }

    & form.button_to {
      display: inline-flex;
      margin: 0;
    }
  }

  /* One user in the popover: their avatar as a round button. */
  .assignees__choices .assignees__choice {
    position: relative;
    display: inline-grid;
    min-block-size: auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;

    &:hover {
      background: none;
      outline: 1px solid var(--color-text);
      outline-offset: 0.125rem;
    }
  }

  /* Assigned: a positive ring and a small tick badge. */
  .assignees__choices .assignees__choice--assigned {
    outline: 0.125rem solid var(--color-positive);
    outline-offset: 0.125rem;

    &::after {
      content: "✓";
      position: absolute;
      inset-block-end: calc(-1 * var(--space-1));
      inset-inline-end: calc(-1 * var(--space-1));
      display: grid;
      place-items: center;
      inline-size: var(--space-4);
      block-size: var(--space-4);
      border-radius: 50%;
      background: var(--color-positive);
      color: var(--color-paper);
      font: var(--text-caption);
    }
  }

  /* At the end of a key result's actions row; before a task's due date. */
  .key-result__actions .assignees {
    margin-inline-start: auto;
  }
}