@import 'edx-bootstrap';
@import "~bootstrap/scss/_buttons";
@import "~bootstrap/scss/utilities/_screenreaders";

$lightest-color: theme-color("lightest");
$primary-color: theme-color("primary");
$success-color: theme-color("success");

.assignment-list-item {
  list-style: none;
  display: inline-block;

  &:after { 
    content: ","; 
  }

  &:last-child {
    &:after {
       content: ""; 
    }
  }
}

.assignment-list {
  display: inline;
  padding-inline-start: map-get($spacers, 3);
}

.checklist-item-link {
  text-decoration: none;
}

//complete checklist item style
.checklist-item-complete {
  box-shadow: -5px 0 0 0 $success-color;

  &:hover {
    box-shadow: -5px 0 0 0 $primary-color;
  }
}

//incomplete checklist item style
.checklist-item-incomplete {
  box-shadow: -5px 0 0 0 $lightest-color;

  .checklist-icon-incomplete {
    color: $gray-600;
  }

  &:hover {
    box-shadow: -5px 0 0 0 $primary-color;

    .checklist-icon-incomplete {
      color: $primary-color;
    }
  }
}

.comment-icon {
  color: $gray-400;
}