@use "./tasks-priorities.scss" as *;
@use "./task-buttons.scss" as *;

@mixin task-item-style {
  li.task-list-item {
    all: unset;
    display: grid;
    grid-template-columns: 24px 1fr;
    row-gap: 0px;
    column-gap: 4px;
    margin-bottom: 6px;
    padding: 8px;
    background-color: var(--gray-75);
    outline: var(--gray-100) 1px solid;
    border-radius: 8px;
    cursor: default;

    .tasks-postpone,
    .tasks-edit,
    .tasks-backlink {
      transition-property: opacity, max-height;
      transition: 200ms cubic-bezier(0.37, 0, 0.63, 1);
      transition-delay: 150ms;
    }

    &:hover {
      .tasks-postpone,
      .tasks-edit {
        opacity: 1;
        max-height: 32px;
      }

      .tasks-backlink {
        opacity: 1;
        max-height: 32px;
      }
    }

    &:has([data-task-priority="highest"]):not([data-task="x"]) {
      background-color: var(--red-75) !important;
      outline: var(--red-200) 1px solid;

      .task-description {
        color: var(--red-500);
      }
    }

    &:has([data-task-priority="high"]):not([data-task="x"]) {
      background-color: var(--orange-75) !important;
      outline: var(--orange-200) 1px solid;

      .task-description {
        color: var(--orange-500);
      }
    }

    &:has([data-task-priority="medium"]):not([data-task="x"]) {
      background-color: var(--yellow-75) !important;
      outline: var(--yellow-200) 1px solid;

      .task-description {
        color: var(--yellow-600);
      }
    }

    &:has([data-task-priority="low"]):not([data-task="x"]) {
      background-color: var(--blue-75) !important;
      outline: var(--blue-200) 1px solid;

      .task-description {
        color: var(--blue-600);
      }
    }

    &[data-task="x"]:not(:hover) {
      .tasks-list-text > :not(.task-description),
      .tasks-backlink {
        display: inline;
      }

      .task-description {
        color: var(--gray-400);
        text-decoration-color: var(--gray-400);
      }
    }
  }
}

.tasks-styled,
.tasks-styled--detailed,
.tasks-styled--minimal {
  .contains-task-list.plugin-tasks-query-result {
    @include task-item-style();

    padding: 1px;

    .task-list-item-checkbox {
      margin: 0 !important;
      align-self: flex-start;
      margin-top: 5px !important;
      justify-self: center;
    }

    .tasks-list-text {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
      grid-column: 2;
      padding-top: 2px;

      // every element that's not the actual task text
      > *:not(.task-description) {
        order: 2;
        background-color: var(--gray-100);
        outline: var(--gray-200) 1px solid;
        border-radius: 99px;
        font-weight: 600;
        height: fit-content;
      }
    }

    .task-description {
      text-wrap: balance;
      line-height: 130%;
      flex-grow: 1;
    }

    .task-extras {
      grid-column: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      overflow: hidden;
      font-size: var(--font-small);
    }

    .tasks-backlink {
      opacity: 0;
      max-height: 0;
      color: transparent; // hides parenthesis ()
      width: 100%;
      text-wrap: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      a {
        margin-left: -6px;
        color: var(--link-color);
        font-size: var(--font-smallest);
      }
    }
  }
}

.tasks-styled--detailed {
  .contains-task-list.plugin-tasks-query-result {
    li.task-list-item {
      row-gap: 2px;
      padding: 4px;
    }

    .task-description {
      width: 100%;
    }

    .tasks-postpone,
    .tasks-edit,
    .tasks-backlink {
      opacity: 1 !important;
      max-height: unset !important;
    }

    .tasks-list-text {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 4px;
      grid-column: 2;
      padding-top: 3px;

      > *:not(.task-description) {
        padding: 0 10px;
        font-size: calc(var(--font-small) * 0.9);
        font-variant-numeric: tabular-nums;
      }

      .task-priority {
        padding: 0 8px;
      }
    }
  }
}

.tasks-styled {
  .contains-task-list.plugin-tasks-query-result {
    li.task-list-item {
      row-gap: 0px;
      padding: 6px;
    }

    .tasks-list-text {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      grid-column: 2;
      padding-top: 2px;

      > *:not(.task-description) {
        padding: 2px 6px;
        line-height: 110%;
        font-size: var(--font-smallest);
      }
    }

    .task-extras {
      font-size: var(--font-small);
    }
  }
}

.tasks-styled--minimal {
  .contains-task-list.plugin-tasks-query-result {
    li.task-list-item {
      row-gap: 2px;
      padding: 4px;

      &:hover {
        background-color: var(--gray-100);
        outline: var(--gray-200) 1px solid;

        .tasks-list-text > *:not(.task-description) {
          max-height: 32px;
          opacity: 1;
        }
      }
    }

    .task-description {
      width: 100%;
    }

    .tasks-list-text {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 4px;
      grid-column: 2;
      padding-top: 3px;

      > *:not(.task-description) {
        transition-property: max-height, opacity;
        transition: 200ms cubic-bezier(0.37, 0, 0.63, 1);
        transition-delay: 150ms;
        max-height: 0;
        opacity: 0;
        padding: 0 10px;
        font-size: calc(var(--font-small) * 0.9);
        font-variant-numeric: tabular-nums;
      }

      .task-priority {
        padding: 0 8px;
      }
    }
  }
}

.tasks-styled,
.tasks-styled--detailed,
.tasks-styled--minimal {
  @include task-priorities;
  @include task-buttons;
}
