/* A todo's status as Linear draws it (todos/_status_dot): a ring that fills as work moves on,
/* in the Work board's column colors. Planned is an empty grey ring, in progress half full
/* (yellow), in review three quarters (green), blocked a full red disc, done the accent with a
/* check. */
:root {
  --color-todo-in-progress: oklch(var(--lch-yellow-medium));
  --color-todo-in-review: oklch(var(--lch-green-medium));
  --color-todo-blocked: oklch(var(--lch-red-medium));
}

@layer components {
  .status-dot {
    --status-dot-color: var(--color-ink-medium);
    --status-dot-fill: 0%;

    background:
      conic-gradient(var(--status-dot-color) var(--status-dot-fill), transparent 0)
      content-box;
    block-size: 0.95em;
    border: 1.5px solid var(--status-dot-color);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    inline-size: 0.95em;
    padding: 1.5px;
    position: relative;
    vertical-align: middle;
  }

  .status-dot--planned { --status-dot-color: var(--color-ink-medium); }
  .status-dot--in-progress { --status-dot-color: var(--color-todo-in-progress); --status-dot-fill: 50%; }
  .status-dot--in-review { --status-dot-color: var(--color-todo-in-review); --status-dot-fill: 75%; }
  .status-dot--blocked { --status-dot-color: var(--color-todo-blocked); --status-dot-fill: 100%; }
  .status-dot--done {
    --status-dot-color: var(--color-link);

    background: var(--status-dot-color);
    padding: 0;

    &::after {
      block-size: 0.45em;
      border: solid var(--color-white);
      border-width: 0 1.5px 1.5px 0;
      content: "";
      inline-size: 0.22em;
      inset: 0.1em auto auto 0.3em;
      position: absolute;
      transform: rotate(45deg);
    }
  }

  /* The small in-place pickers on work rows: status (a circle) and owner (an avatar). */
  .row-picker {
    display: inline-block;
    position: relative;

    .popup {
      min-inline-size: 11em;
      max-block-size: min(22em, 70dvh);
      overflow-y: auto;
    }

    /* Pinned to the viewport beside its trigger (fixed_popup_controller), so a scrolling list
       can't clip it. */
    &.fixed-popup--placed .popup[open] {
      inset: var(--popup-top) auto auto var(--popup-left);
      margin: 0;
      position: fixed;
      translate: none; /* the popup's own centring would push it half its width away */
      z-index: 50;
    }
  }

  .status-dot-picker__trigger {
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-grid;
    font-size: 1rem;
    padding: 0.35em;
    place-items: center;
    transition: background-color 80ms ease-out;

    @media (any-hover: hover) {
      &:hover { background-color: var(--color-hover); }
    }

    &:has(.status-dot-picker__label) {
      border-radius: var(--radius-pill, 99rem);
      color: inherit;
      font: inherit;
      gap: 0.5ch;
      grid-auto-flow: column;
      padding-inline: 0.5em 0.7em;

      @media (any-hover: hover) {
        &:hover { background-color: var(--color-ink-lightest); transform: none; }
      }
    }
  }

  /* A status badge that opens its picker (clients/_status_picker): the badge is the button. */
  .status-tag-picker__trigger {
    background: none;
    border: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
    padding: 0;

    @media (any-hover: hover) {
      &:hover .status-tag { filter: brightness(0.95); }
    }
  }

  .status-dot-picker__label {
    font-size: var(--text-small);
    white-space: nowrap;
  }

  .owner-picker__trigger {
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--radius-pill, 99rem);
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 0.5ch;
    max-inline-size: 14em;
    padding: 0.15em;
    text-align: start;

    @media (any-hover: hover) {
      &:hover { background-color: var(--color-ink-lightest); }
    }
  }

  .owner-picker__avatar {
    block-size: 1.6rem;
    border-radius: 50%;
    flex-shrink: 0;
    inline-size: 1.6rem;
  }

  .owner-picker__avatar--small {
    block-size: 1.3rem;
    inline-size: 1.3rem;
  }

  .owner-picker__empty {
    align-items: center;
    block-size: 1.6rem;
    border: 1.5px dashed var(--color-ink-light);
    border-radius: 50%;
    color: var(--color-ink-medium);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 0.8rem;
    inline-size: 1.6rem;
    justify-content: center;
  }

  .owner-picker__empty--small {
    block-size: 1.3rem;
    inline-size: 1.3rem;
  }

  .owner-picker__name {
    min-inline-size: 0;
  }
}

/* An engagement's work (todos/_section): groups sit close, with a small gap, not a section's. */
@layer components {
  .work-groups {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .work-group {
    display: flex;
    flex-direction: column;

    .settings__scrollable-list {
      margin-block: 0;
    }
  }
}

/* The owner picker's search: the first line of its menu, ruled off from the people. */
@layer components {
  .owner-picker__search,
  .owner-picker__search:focus-visible {
    background: transparent;
    border: 0;
    border-block-end: 1px solid var(--color-ink-lighter);
    border-radius: 0;
    box-shadow: none;
    margin-block-end: 0.25rem;
    outline: none;
    padding-block: 0.4rem;
  }
}