/*
 * TaskComponent in a .task-list: compact hairline rows. A three-state check
 * (empty = to do, orange = in progress, ticked = done), the title edited in
 * place, the due date one click away, Delete (to the trash) on hover. Done
 * rows sink to the bottom, struck through.
 */
@layer components {
  .task-list {
    list-style: none;
    padding: 0;

    & > li + li {
      margin-block-start: 0;
    }
  }

  /*
   * Hairlines between rows only, so the last row never doubles the next
   * section's rule.
   */
  /* Every part of the row centred on one line: check, title, due date, Delete. */
  .task-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-inline-size: none;
    padding-block: var(--space-2);

    & + & {
      border-block-start: var(--border);
    }

    /* The row lays out its parts; the base paragraph and form rhythm must not. */
    & > *,
    & .task-row__body > * {
      margin: 0;
    }

    &[draggable="true"] {
      cursor: grab;
    }

    /* Delete shows while the row is pointed at or focused. */
    &:not(:hover, :focus-within) .task-row__delete {
      opacity: 0;
    }
  }

  .task-row--dragging {
    opacity: 0.4;
  }

  .task-row--done :is(.task-title-form__input, .task-row__title) {
    color: var(--color-subtle);
    text-decoration: line-through;
  }

  /* The check: a native button styled as a box, role="checkbox" with aria-checked. */
  .task-row__check {
    display: inline-flex;
    margin: 0;
  }

  .task-check,
  .task-row__check .task-check {
    position: relative;
    display: inline-block;
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    min-block-size: auto;
    padding: 0;
    border: 1px solid var(--color-text);
    border-radius: var(--radius-xs);
    background: var(--color-paper);
    cursor: pointer;

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

  .task-check--in-progress,
  .task-row__check .task-check--in-progress {
    background: var(--color-attention);
    border-color: var(--color-attention);

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

  .task-check--done,
  .task-row__check .task-check--done {
    background: var(--color-text);
    border-color: var(--color-text);

    &:hover {
      background: var(--color-graphite);
    }

    /* The tick: two borders of a rotated box. */
    &::after {
      content: "";
      position: absolute;
      inset-block-start: 12%;
      inset-inline-start: 32%;
      inline-size: 30%;
      block-size: 55%;
      border: solid var(--color-paper);
      border-width: 0 0.125rem 0.125rem 0;
      transform: rotate(45deg);
    }
  }

  /* Title and due date, side by side; the frame repaints them after a save. */
  .task-row__body {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    min-inline-size: 0;
  }

  .task-title-form {
    flex: 1;
    min-inline-size: 12rem;
    margin: 0;

    & .field_with_errors {
      display: contents;
    }
  }

  /* Block, so the form adds no line-box descender space and centres true. */
  .task-title-form__input {
    display: block;
    inline-size: 100%;
    max-inline-size: none;
    min-block-size: auto;
    padding: 0 var(--space-1);
    margin-inline-start: calc(-1 * var(--space-1));
    border: 1px solid transparent;
    background: transparent;
    font: var(--text-body);
    color: var(--color-ink);
    resize: none;
    field-sizing: content;
    cursor: text;

    &:hover {
      border-color: var(--color-line);
    }

    &:focus {
      border-color: var(--color-text);
      background: var(--color-paper);
      outline: 0;
    }
  }

  .task-row__title {
    flex: 1;
    color: var(--color-ink);
  }

  /* "due 30 Sep" or "No due date", right-aligned; clicking edits it. */
  .task-row__due {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    font: var(--text-small);
    color: var(--color-muted);
    white-space: nowrap;

    & > summary {
      list-style: none;
      font: inherit;
      text-decoration: underline dotted;
      text-underline-offset: 0.2em;
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }

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

    &[open] > summary {
      margin-block-end: var(--space-1);
    }
  }

  .task-row__due--overdue {
    color: var(--color-negative);
  }

  .task-due-form {
    margin: 0;

    & input[type="date"] {
      min-inline-size: 0;
      min-block-size: auto;
      padding: var(--space-1) var(--space-2);
    }
  }

  /* Delete: a quiet text button; the task goes to the trash, not away. */
  .task-row__delete,
  form.button_to .task-row__delete {
    padding: 0;
    border: 0;
    background: none;
    font: var(--text-small);
    color: var(--color-muted);
    text-decoration: underline;
    text-underline-offset: 0.2em;

    &:hover {
      background: none;
      color: var(--color-negative);
    }
  }

  /* Add a task: one field at the top of the list; Enter saves. */
  .task-new-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-2);

    & input[type="text"] {
      flex: 1;
      max-inline-size: none;
      min-block-size: auto;
      padding: var(--space-2) var(--space-3);
    }

    & .field_with_errors {
      display: contents;
    }
  }

  /* See trash (3): the trashed tasks, compact, each with Restore. */
  .task-trash {
    margin-block-start: var(--space-4);
    padding: 0;
    border: 0;

    & > summary {
      display: inline;
      font: var(--text-small);
      color: var(--color-muted);
      text-decoration: underline;
      text-underline-offset: 0.2em;
      list-style: none;

      &::-webkit-details-marker {
        display: none;
      }
    }

    &[open] > summary {
      display: block;
      margin-block-end: var(--space-2);
    }
  }

  .task-trash__list {
    list-style: none;
    padding: 0;
    font: var(--text-small);

    & > li {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      max-inline-size: none;
      padding-block: var(--space-1);
      border-block-end: var(--border);
    }

    & > li + li {
      margin-block-start: 0;
    }
  }

  .task-trash__title {
    flex: 1;
    color: var(--color-subtle);
    text-decoration: line-through;
  }
}