/* Todos
 * -------------------------------------------------------------------------- */

.todos {
  background-color: var(--color-bg--secondary-glint);
  border-top: 1px solid var(--color-border--medium);
  border-bottom-left-radius: 0.8rem;
  border-bottom-right-radius: 0.8rem;
  padding: var(--quarter-space) var(--half-space);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;

  &:first-of-type {
    border-top: 0;
  }

  @media (max-width: 39.95em) {
    display: block;
  }
}

.todos__label {
  font-size: var(--font-size-xxx-small);
  color: var(--color-txt--subtle);
  text-transform: uppercase;
  margin-right: var(--half-space);
}

.todos__area {
  flex: 1;
}

.todos__items {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.todo {
  font-size: var(--font-size-xx-small);
  background-color: var(--color-bg--surface);
  padding: var(--quarter-space) var(--base-space) var(--quarter-space) var(--quarter-space);
  border-radius: 4em;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin: var(--quarter-space);
  cursor: grab;
  opacity: 0.999; /* Ensures draggable has rounded corners on Google Chrome */
  height: 2.3em;

  &:has(.todo-form) {
    padding: 0 var(--base-space) 0 var(--quarter-space);
  }

  &:focus-within {
    outline: 3px solid transparent;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
}

.todo__checkbox {
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  margin-right: var(--quarter-space);
  background-color: var(--color-bg--main);
  text-indent: -999em;

  &:focus {
    outline: 3px solid transparent;
    box-shadow: 0 0 0 2px var(--color-focus-ring);
  }
}

.todo__checkbox--checked {
  background: var(--color-bg--main) url("/assets/icons/checkmark-e3ac2488.svg") no-repeat center center / 0.75em;
  [data-color-scheme="dark"] & {
    background: var(--color-bg--main) url("/assets/icons/special-case-colors/checkmark-white-eb06bf90.svg") no-repeat center center / 0.75em;
  }
}

.todo__text {
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 90vw;

  &:focus {
    outline: 0;
    box-shadow: none;
  }

  @media (max-width: 39.95em) {
    max-width: 85vw;
  }
}

.todo-form {
  display: flex;
  margin-left: var(--half-space);

  .btn--plain-icon {
    height: 1.8rem;
    width: 1.8rem;
  }

  input {
    margin-right: var(--quarter-space);
    max-width: 90vw !important;

    @media (max-width: 39.95em) {
      max-width: 75vw !important;
    }
  }
}

.todo-add {
  flex-grow: 1;

  input[type=text] {
    width: 100%;
    height: 2.9em;

    &:focus::placeholder { visibility: hidden; }

  }
}

.todo-delete {
  border-left: 1px dashed var(--color-border);
  padding-left: var(--quarter-space);
  margin: 0 -8px 0 4px;
}

/*Drag & Drop */
.dragging {
  .todos__items {
    width: 100%;
  }
}

.todo--dragging {
  cursor: grabbing;
  rotate: 2deg;
  transform-origin: center;
  scale: 0.75;
}

.todo--ghosted {
  opacity: 0.5;
  border: 1px dashed var(--color-border);
}