@use '../../../../styles/_globals.scss' as *;

.tasks {
  margin-bottom: var(--s);
}

.section-heading {
  display: flex;
  align-items: center;
  gap: var(--s-half);
  margin: 0;

  & + .tasks + & {
    margin-top: var(--s3);
  }
  font-size: 14px;
  font-weight: bold;
  opacity: 0.85;

  mat-icon {
    font-size: 14px;
    height: 14px;
    width: 14px;
  }
}

.task {
  display: flex;
  align-items: center;
  @include extraBorder('-bottom');
  padding: var(--s);
  padding-left: 0;

  &:last-child {
    border-bottom: 0;
  }

  .title-wrapper {
    flex: 1;
    margin-right: var(--s);
  }

  .due-for {
    margin-left: var(--s);
    font-size: 11px;
    line-height: 1.4;
    padding-bottom: var(--s-half);
  }

  .schedule-hint {
    display: flex;
    align-items: center;
    gap: var(--s-half);
    margin-left: var(--s);
    padding-bottom: var(--s-half);
    color: var(--text-color-muted);
    font-size: 11px;
    line-height: 1.4;

    mat-icon {
      flex: 0 0 auto;
      width: 14px;
      height: 14px;
      font-size: 14px;
    }
  }

  .title {
    margin-left: var(--s);
  }

  tag-list {
    margin-top: var(--s-half);
  }

  .actions {
    @include mq(sm) {
      margin: var(--s);
    }

    button {
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
}

.footer-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding-bottom: var(--s);
}

.wrap-buttons {
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s);

  // Spacing in this row is owned by the flex `gap` above. Material also adds
  // `margin-left: 8px` between adjacent dialog-action buttons, but that only
  // lands on siblings that are themselves buttons — the split-button host is
  // not, so the done button ends up with 8px on its left and gap+8px on its
  // right. Cancel Material's margin so left/right spacing stays equal.
  .mat-mdc-button-base + .mat-mdc-button-base {
    margin-left: 0;
  }
}

// Compact, outlined square so the lone "done" icon reads as a peer of the
// (also outlined) snooze split-button rather than a stray borderless icon.
// Material's button defaults assume an icon + text label, so collapse the
// min-width and icon spacing to truly center the lone icon.
.done-btn {
  min-width: 0;
  width: 36px;
  padding: 0;

  mat-icon {
    margin: 0;
  }
}

.bulk-actions-header {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-color-muted);
  margin: var(--s-half) 0 var(--s2);
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;

  &::before,
  &::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--divider-color);
  }

  &::before {
    margin-right: var(--s);
  }

  &::after {
    margin-left: var(--s);
  }
}
