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

.x-list-group-schedule-item {
  @extend .list-group-item,
          .p-0,
          .w-100;

  border: none!important;
  &: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%;
    }
  }

  &.x-schedule-today:before {
    .x-has-timeline & {
      @extend .bg-secondary;
    }
  }

  &.x-schedule-upcoming:before  {
    .x-has-timeline & {
      @extend .bg-primary;
    }
  }

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

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

.x-list-group-schedule-content {
  @extend .d-flex,
          .align-items-center,
          .w-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 .d-flex,
          .align-items-center,
          .w-100,
          .mr-auto,
          .py-2,
          .position-relative,
          .align-self-stretch,
          .justify-content-center;
  max-width: 5em;
  min-width: 5em;
  padding-right: 1.250em;
  padding-left: 1.250em;

  .x-avatar {
    border: 3px solid $white;

    .x-schedule-today & {
      @extend .bg-secondary;
    }

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

.x-tl-item {
  @extend  %font-size-sm,
          .d-flex,
          .py-2,
          .w-100,
          .overflow-hidden,
          .align-self-stretch,
          .align-items-center,
          .text-grey;

  .x-list-group-schedule-item:not(:last-child) & {
    @extend .border-bottom;
  }
}

.x-tl-more {
  @extend .ml-auto,
          .d-flex,
          .align-items-center;
  width: 20px;
}

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


.x-tl-content-status {
  min-width: 9.375em;
}

.x-tl-content-desc {
  @extend .overflow-hidden,
          .flex-1,
          .text-nowrap;
}



// task-list item elements
.x-tl-heading {
  @extend .font-weight-bold,
          .text-nowrap,
          .text-muted,
          .text-truncate,
          .d-block,
          .mb-0;

  .x-schedule-today & {
    @extend .text-secondary;
  }

  .x-schedule-upcoming & {
    @extend .text-primary;
  }

}

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



// no-results
.x-no-results {
  @extend .d-flex,
          .h-100,
          .align-items-center,
          .justify-content-center;
}