// task-list
.x-list-group-schedule {
  @extend .list-group,
          .list-group-flush;
}

.x-list-group-schedule-item {
  @extend .list-group-item,
          %p-0;
  border: none!important;
  width: 100%;

  .x-tl-row {
    &:before {
      .x-has-timeline & {
        @extend %position-absolute,
                %bg-light;
        left: 2.36em;
        top: -1px;
        bottom: 0;
        content: "";
        width: 0.250em;
        z-index: 0;
        height: 104%;
      }

      // Default, Upcoming, Today
      .x-schedule-upcoming & {
        .x-has-timeline & {
          @extend %bg-primary-transparent;
        }
      }
      .x-schedule-today & {
        .x-has-timeline & {
          @extend %bg-secondary;
        }
      }
    }

    &.x-schedule-overdue:before {
      .x-has-timeline & {
        background-color: lighten(theme-color("danger"), 50%) !important;
      }
    }
  }

  .x-badge-status {
    @extend .badge;
  }

  &.x-schedule-completed {
    .x-badge-status {
      @extend .badge-info;
    }
  }
  &.x-schedule-overdue {
    .x-badge-status {
      @extend .badge-danger;
    }
  }
  &.x-schedule-today {
    .x-badge-status {
      @extend .badge-secondary;
    }
  }
  &.x-schedule-upcoming {
    .x-badge-status {
      @extend .badge-primary;
    }
  }
  &.x-schedule-overdue .x-tl-row:before {
    background-color: lighten(theme-color("danger"), 50%) !important;
  }

  &.x-schedule-today .x-tl-row::before {
    @extend %bg-secondary;
  }

  &.x-schedule-upcoming .x-tl-row::before  {
    @extend %bg-primary-transparent;
  }

  @include hover-focus {
    @extend %cursor-pointer,
            %bg-light-transparent;

    &.disabled {
      @extend %cursor-not-allowed;
    }
  }
}

.x-list-group-schedule-content {
  @extend %x-flex-a-center;
  min-height: 3.188em;
  width: 100%;
}

.x-list-group-schedule-heading {
  @extend .list-group-item,
          %bg-white,
          .border-0;

  @include hover-focus {
    @extend .border-0;
  }
}



// task-list item
.x-tl-status {
  @extend %x-flex-a-center,
          %mr-auto,
          %py-2,
          %position-relative,
          %align-self-stretch;
  max-width: 5em;
  min-width: 5em;
  padding-right: 1.250em;
  padding-left: 1.250em;

  .x-avatar {
    @extend %bg-light-secondary,
            %text-info;
    border: 3px solid $white;

    .x-schedule-today & {
      @extend %bg-secondary,
              %text-white;
    }

    .x-schedule-upcoming & {
      @extend %text-primary,
              %bg-light-tertiary;
    }

    .x-schedule-overdue & {
      @extend %text-danger;
      background-color: lighten(theme-color("danger"), 50%) !important;

    }

    .x-list-group-schedule-item:hover & {
      border: 3px solid $gray-300;
    }
  }
}

.x-tl-task {
  @extend %x-flex-a-center,
          %mr-auto,
          %justify-content-start,
          %pr-3;
}

.x-tl-item {
  @extend  %font-size-sm,
  %x-flex-a-center,
          %py-2,
          .overflow-hidden,
          %align-self-stretch,
          %text-grey;
    width: 100%;
  &.x-tl-item-actions {
    .btn-toolbar-actions {
      @extend %d-none;
    }
    @include hover-focus-active {
      .btn-toolbar-actions {
        @extend %d-block;

        .btn {
          box-shadow: none !important;
        }
      }
    }
  }
  .x-list-group-schedule-item:not(:last-child) & {
    @extend .border-bottom;
  }
}

.x-tl-more {
  @extend %ml-auto,
  %x-flex-a-center;
  width: 20px;
}

.x-tl-content-people {
  @extend %d-flex;
  min-width: 14.500em;
  .x-attendees-list {
    @extend %ml-2;
  }
}



.x-tl-heading {
  @extend %font-weight-bold,
          %text-nowrap,
          %text-grey,
          %text-truncate,
          %d-block,
          %mb-0;
}

.x-tl-content-status {
  min-width: 14rem;

  .x-tl-heading {

    .x-schedule-overdue & {
      @extend %text-danger;
    }
    .x-schedule-today & {
      @extend %text-secondary;
    }
    .x-schedule-today & {
      @extend %text-secondary-darker;
    }
    .x-schedule-upcoming & {
      @extend %text-default;
    }
  }
}

.x-tl-content-desc {
  @extend .overflow-hidden,
          %flex-1,
          %d-flex,
          %flex-column,
          %align-content-center,
          %text-nowrap;

  .x-tl-heading {

    &.is-completed {
      @extend %text-linethrough,
              %text-muted;
    }
    .x-schedule-today & {
      @extend %text-secondary-darker;
    }
    .x-schedule-overdue & {
      @extend %text-default;
    }
    .x-schedule-upcoming & {
      @extend %text-primary;
    }

  }
}

.x-tl-desc {
  @extend %text-truncate,
  %pt-1,
  %mb-0;
  dd {
    @extend %mb-0;
  }
}


// no-results
.x-no-results {
  @extend %x-flex-center,
          .h-100;
}

.x-tl-overdue {
  @extend %text-danger;
}