:root {
  color-scheme: light;
  --surface: #fff;
  --surface-muted: #efefef;
  --text: #333;
  --text-muted: #666;
  --border: #ddd;
  --link: #0d6efd;
  --chart-fill: rgba(13, 110, 253, 0.14);
}

.todo-row[aria-busy="true"] .drag-handle {
  pointer-events: none;
}

.calendar-controls {
  display: flex;
  align-items: center;
  position: absolute;
  top: 12px;
  right: 0;
  background: var(--surface);
  border-radius: 4px;
}

.calendar-controls > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--link);
  background: var(--surface);
  border-color: var(--border);
  transition: none;
}

.calendar-controls > a:hover {
  background: var(--surface-muted) !important;
}

.project-list-item {
  --card-surface: var(--surface);
  --card-text: var(--text);
  --card-muted: var(--text-muted);
  --card-border: var(--border);
  --card-link: var(--link);
  --card-tag: var(--surface-muted);
}

.project-list-item.theme--dark {
  --card-surface: #25282b;
  --card-text: #ecedf0;
  --card-muted: #b6bdc5;
  --card-border: #505860;
  --card-link: #a8ceff;
  --card-tag: #34393e;
}

.project-list-item.theme--holiday {
  --card-surface: #f1f8f4;
  --card-text: #203e33;
  --card-muted: #4c675b;
  --card-border: #b5d2c0;
  --card-link: #21614a;
  --card-tag: #e0eee5;
}

.projects-list .project-list-item {
  background: var(--card-surface);
  color: var(--card-text);
  border-color: var(--card-border);
}

.projects-list .project-list-item :is(h3 a, .button-icon-link) {
  color: var(--card-link);
}

.projects-list .project-list-item :is(.project-list-item__description, .project-list-item__meta, .meta-link) {
  color: var(--card-muted);
}

.projects-list .project-list-item .project-list-item__meta svg {
  fill: currentColor;
}

.projects-list .project-list-item .tag {
  color: var(--card-text);
  background: var(--card-tag);
}

.projects-list .project-list-item .drag-handle {
  background: transparent;
}

.projects-list .project-list-item :is(a, button, .tag) {
  transition-property: opacity, box-shadow;
}

.projects-list .project-list-item.activeItem {
  opacity: 0.45;
}

@media (max-width: 650px) {
  .calendar-controls {
    position: static;
    width: max-content;
    margin: 8px 0 0 auto;
  }
}

@media (prefers-color-scheme: dark) {
  .project-list-item.theme--holiday {
    --card-surface: #1e3028;
    --card-text: #e5f0e9;
    --card-muted: #b2cbbd;
    --card-border: #466352;
    --card-link: #a8ddbc;
    --card-tag: #30483b;
  }
  :root {
    color-scheme: dark;
    --surface: #191b1d;
    --surface-muted: #272a2d;
    --text: #e8e9eb;
    --text-muted: #afb4bb;
    --border: #484d53;
    --link: #86bbff;
    --chart-fill: rgba(134, 187, 255, 0.14);
  }

  body, .app, .modal-content, .dropdown__menu,
  .friend-autocomplete__results, .tw-table,
  .calendar-full__day, article:not([class*="theme--"]),
  .project-list-item:not([class*="theme--"]) {
    background-color: var(--surface);
    color: var(--text);
  }

  body, input, button, select, textarea, .todos a,
  .document-item .todo-item__name, .markdown-body, .tag-filter-item:not(.active) {
    color: var(--text);
  }

  a, .logo a, .button-link, .button-icon-link, .button-outline,
  .rich-text a, .markdown-body a, .calendar-full__day--today .calendar-full__date-number small {
    color: var(--link);
  }

  textarea, input:not([type="checkbox"]):not([type="submit"]):not([type="hidden"]),
  select, .form-control, .form-control--small {
    color: var(--text);
    background-color: var(--surface);
    border-color: var(--border);
  }

  input::placeholder, textarea::placeholder, small, .text-muted, .tw-text-muted,
  .project-list-item__meta, .project-list-item__description, .progress-bar__label,
  .search-modal-hint, .doc-editor__status, .document-item .todo-item__icon {
    color: var(--text-muted);
  }

  .header, hr, .todos, .todos li, .document-item, .project-list-item,
  .tw-table th, .tw-table td, .calendar-full, .inline-check-list__item,
  .doc-editor__header, .doc-editor__editor, .markdown-body :is(h1, h2, th, td, blockquote) {
    border-color: var(--border);
  }

  .calendar__day--today, .calendar-full__day--muted, .calendar-full__day--today,
  .tag, .alert, .search-modal-hint kbd,
  .tw-table thead th, .tw-table--striped tbody tr:nth-child(even),
  .markdown-body pre, .markdown-body code, .markdown-body th,
  .project-list-item .drag-handle, .button-pip-outline {
    background-color: var(--surface-muted);
    color: var(--text);
  }

  .tw-table--striped tbody tr:nth-child(odd) {
    background-color: var(--surface);
  }

  .document-item:hover, .editable-field:hover, .tw-table tbody tr:hover,
  .friend-autocomplete__item:hover, .friend-autocomplete__item--active,
  .inline-check-list__item:hover, .inline-check-list__item:has(input:checked),
  .todos li.important, .activeItem, .dropTarget {
    background-color: var(--surface-muted);
  }

  .button-outline:hover {
    background-color: var(--surface-muted) !important;
  }

  .toggle__header:hover, .toggle__header:hover h5 {
    color: var(--text) !important;
  }

  .project-tabs__tab--active {
    border-bottom-color: var(--surface);
  }

  .progress-bar__track, .calendar-full {
    background-color: var(--border);
  }

  .modal-mask {
    background-color: #0009;
  }

  .dropdown__menu::after {
    border-bottom-color: var(--surface);
  }

  .markdown-body pre code {
    background: none;
  }

  .markdown-body blockquote {
    color: var(--text-muted);
  }

  .button, .banner, .flash__message {
    color: #fff;
  }
}