.project-tasks-list {
    display: none;
}

/* Only show project-tasks-list menu-item-group if there are tasks */
.project-tasks-list:has(project-task) {
    display: flex;
}

.project-task {
    display: flex;
    align-items: center;
    position: relative;
    max-width: 42ch;
}

/* Hide bottom border from "add task" button if the tasks list is empty */
#project-tasks-popover:not(:has(project-task)) menu-item-group:first-child {
    border-bottom: 0;
}

/* ************************************************** */
/* #region PROJECT TASK CHECKBOX                      */
/* ************************************************** */

.project-task-checkbox {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: max(24px, 3ch);
    height: 24px;
    padding: 2px;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
    box-sizing: content-box;
    cursor: pointer;
    z-index: 2;
}

.project-task-checkbox.checkbox-item::before {
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
}

.project-task-checkbox.checkbox-item:has(input:checked)::before {
    content: "[✔]";
}

.project-task-checkbox.checkbox-item:hover {
    background-color: var(--bg-color-hover);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-color-hover);
}

.project-task:has(.project-task-details:hover) .project-task-checkbox.checkbox-item {
    color: var(--text-color-hover);
}

.project-task:has(.project-task-details-textarea:focus) .project-task-checkbox.checkbox-item {
    color: var(--text-color);
}

.project-task:has(.project-task-details-textarea:focus) .project-task-checkbox.checkbox-item:hover {
    color: var(--text-color-hover);
}

/* #endregion */

/* ************************************************** */
/* #region PROJECT TASK DETAILS                       */
/* ************************************************** */

.project-task-details {
    width: 100%;
    /* padding-left: checkbox-width (24px/3ch) + padding (4px) + 2x border-width */
    padding-left: min(calc(4px + 24px + 4px + 2 * var(--border-width)), calc(4px + 3ch + 4px + 2 * var(--border-width)));
    /* padding-right: gap (8px) + toolbar-width(24px + 2x padding (2px) + 2x border-width) */
    padding-right: calc(4px + 24px + 4px + 2 * var(--border-width));
    padding-block: 0;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
}

.project-task-details:hover {
    background-color: var(--bg-color-hover);
    border-color: var(--border-color);
    color: var(--text-color-hover);
}

.project-task-details:has(.project-task-details-textarea:focus):hover {
    background-color: var(--bg-color);
    border-color: transparent;
    color: var(--text-color);
}

.project-task-details-textarea-wrapper {
    padding: 2px;
    border-radius: var(--border-radius);
}

.project-task-details-textarea-wrapper:has(.project-task-details-textarea:focus) {
    outline: auto;
}

.project-task-details-textarea {
    field-sizing: content;
    min-width: 16ch;
    width: 100%;
    min-height: 24px;
    padding: 0;
    padding-top: calc((24px - 1lh) / 2);
    color: currentColor;
    line-height: normal;
}

.project-task-details-textarea:focus {
    color: var(--text-color);
}

/* #endregion */

/* ************************************************** */
/* #region PROJECT TASK TOOLS                         */
/* ************************************************** */

.project-task-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.project-task-tool {
    justify-content: center;
    padding: 2px;
    border: var(--border-width) solid transparent;
    border-radius: 3px;
}

.project-task-tool:hover {
    background-color: var(--bg-color-hover);
    border: var(--border-width) solid var(--border-color);
    color: var(--text-color-hover);
}

.project-task:has(.project-task-details:hover) .project-task-tool {
    color: var(--text-color-hover);
}

.project-task:has(.project-task-details-textarea:focus) .project-task-tool {
    color: var(--text-color);
}

.project-task:has(.project-task-details-textarea:focus) .project-task-tool:hover {
    color: var(--text-color-hover);
}

/* #endregion */