/* Rounded-rect label. Two uses: a removable flag (Due date, Urgent,
   Business hours on Task Detail) -- absent until added via a .more-menu
   item, shown with a trailing x to remove it back into that menu; and a
   property-menu.js trigger (Status/Duration/Assignee/Domain everywhere)
   -- shows the current value, or .chip--dashed's ghost "+ Label" state
   when unset. See GitHub issue #175. */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--text);
  /* Reset native <button> chrome for the property-chip trigger use --
     harmless on the plain <span> chips too. */
  appearance: none;
  -webkit-appearance: none;
  cursor: default;
}

.chip--removable {
  padding-right: var(--space-2);
}

.domain-chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.sort-chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

[data-property-menu-domain] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.flag-picker {
  flex-shrink: 0;
}

.date-picker {
  position: relative;
}

.date-picker-trigger {
  position: relative;
  cursor: pointer;
}

.date-picker-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.date-picker-clear {
  position: relative;
  z-index: 1;
}

.date-picker.due-future {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.date-picker.due-soon {
  background: var(--warning-tint);
  color: var(--warning);
  border-color: var(--border);
}

.date-picker.due-overdue {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--border);
}

/* Unset value's ghost state -- "+ Duration", "+ Assignee". */
.chip--dashed {
  border-style: dashed;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
}

/* Task Detail's Status chip mirrors the row status circle (#308): the ring
   is an inline SVG drawn to the chip's measured box by property-menu.js
   (dashed = Plan, solid = Active, filled = Done), so the chip itself drops
   the plain 1px border/fill and just positions the ring behind its label.
   A `border: dashed` can't hold the ring's dash rhythm on the pill's curve,
   same reason the row circle is an SVG. */
.chip--status {
  position: relative;
  border: none;
  background: none;
}

.chip--status .chip-status-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.chip--status .chip-label {
  position: relative;
  z-index: 1;
}

.chip--status[data-status-state="plan"] .chip-label,
.chip--status[data-status-state="active"] .chip-label {
  color: var(--accent);
}

/* Done is a filled accent pill, so its label flips to the on-accent color. */
.chip--status[data-status-state="done"] .chip-label {
  color: var(--accent-contrast);
}

/* The task-detail assignee chip optionally contains a 22px avatar. Fix its
   outer height to the normal chip measure so assignment does not resize it. */
.chip--assignee {
  height: 30px;
  padding-top: 0;
  padding-left: var(--space-1);
  padding-bottom: 0;
}

/* Without this, a touch press-and-drag on the trigger (the whole point of
   property-menu.js's press-select gesture) races the browser's own default
   pan/scroll -- once the browser decides to scroll it hijacks the pointer
   sequence (dispatching pointercancel), which closed the menu out from
   under the gesture. touch-action: none hands all touch interaction on
   this element to JS from the first pointerdown. */
[data-property-menu-trigger] {
  cursor: pointer;
  touch-action: none;
}

.chip--urgent {
  background: var(--danger-tint);
  color: var(--danger);
  border-color: var(--danger-tint);
}

.chip--accent {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: var(--accent-tint);
}

.chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: none;
  border-radius: var(--radius-circle);
  background: none;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
}

.chip-remove:hover {
  opacity: 1;
}