.grid-learning-modules {
  display: grid;
  gap: $grid-gutter-width;
}

.grid-learning-modules.col-wrap {
  @include media-breakpoint-up(md) {
    grid-template-columns: auto auto;
    grid-template-rows: auto;
  }
}


////// Badges //////

.learn-module-label,
.learn-course-label,
.mandatory-module-badge,
.mandatory-course-badge {
  margin-left: $spacing-xs;
  font-size: $font-size-xs;
}

.mandatory-module-badge,
.mandatory-course-badge {
  position: relative;
  padding-left: $spacing-md;
}

.mandatory-module-badge::before,
.mandatory-course-badge::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: $icon-xs;
  height: $icon-xs;
  left: 0;
  top: -1px;
  mask-image: url("@images/exclamation-circle-filled.svg");
  mask-repeat: no-repeat;
  background-color: $info;
}

.course-badge {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin-left: $spacing-xs;
  padding: $spacing-xxs $spacing-xs;
  border-radius: $border-radius;
  font-weight: $font-weight-semibold;
  line-height: 1;
  background-color: $gray-light;
}

.course-badge.success {
  background-color: $success;
}

.course-badge.mandatory,
.card-badge.mandatory {
  color: $white;
  background-color: $info;
}

.course-badge.locked::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: $icon;
  margin-right: $spacing-xs;
  left: 0;
  top: -1px;
  mask-image: url("@images/lock.svg");
  mask-repeat: no-repeat;
  background-color: $gray-darker;
}

////// Learning module and course //////

.learning-modules-group {
  position: relative;
  padding: $spacing-md;
  background-color: $gray-lighter;
  border-radius: $border-radius;
}

.learning-modules-group .course-badge {
  margin-left: 0;
  margin-bottom: $spacing-sm;
}

.learning-module,
.learning-course {
  display: flex;
  flex-direction: row;
}

.learning-module-button,
.learning-course-button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-right: $spacing-xs;
  width: $spacing-xl;
  height: $spacing-xl;
  border-radius: $border-radius;
  color: $white;
  background-color: $primary;
}

.learning-module.completed .learning-module-button, 
.learning-course.completed .learning-course-button {
  background-color: $success;
}

.learning-module.failed .learning-module-button,
.learning-course.failed .learning-course-button {
  background-color: $danger;
}

.learning-module-button,
.learning-module.completed .learning-module-button,
.learning-module.failed .learning-module-button,
.learning-course-button,
.learning-course.completed .learning-course-button,
.learning-course.failed .learning-course-button {
  &:hover, &:focus, &:active {
    color: $white;
    background-color: $link-hover-color;
    .icon {
      color: $white;
    }
  }
}

.learning-module.locked .learning-module-button,
.learning-course.locked .learning-course-button {
  cursor: not-allowed;
  background-color: transparent;
  background-image: url("@images/pattern-stripes-transparent.png");
  background-repeat: repeat;
  border: $border-width solid $gray-light;
  color: $disabled;

  &:hover, &:focus, &:active {
    color: $disabled;
    .icon {
      color: $disabled;
    }
  }
}

.learning-module-button .icon {
  font-size: $icon-lg;
  height: $icon-lg;
}

.learning-module-heading,
.learning-course-heading {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.learning-module-title,
.learning-course-title,
.learning-activity-title {
  font-weight: bold;
  color: $black;
}


// Subtasks

.learning-module .subtask {
  display: flex;
  margin-top: $spacing-xxs;
}

.learning-module .subtask .icon {
  color: $disabled;
}

.learning-module .subtask.completed .icon {
  color: $success;
}


////// Learning course //////

.learning-course {
  background-color: $gray-lighter;
  border-radius: $border-radius;
}

.learning-course.collapsable {
  flex-direction: column;
}

.learning-course.collapsable > summary {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  width: 100%;
}

.learning-course.collapsable[open] > summary {
  border-bottom: $border-width solid $white;
}

.learning-course.collapsable[open] .learning-course-button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.learning-course.collapsable .collapse-btn {
  display: inline-flex;
  flex-shrink: 0;
  width: $btn-height;
  height: 100%;
  padding: $spacing-xxs;
  padding-top: $spacing-xs;
  justify-content: center;
  align-items: start;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  &:hover:after {
    background-color: $white;
  }
}

.learning-course.collapsable[open] .collapse-btn {
  border-radius: 0;
  &:last-child {
    border-radius: 0 $border-radius 0 0;
  }
}

.learning-course.collapsable .collapse-btn:after {
  content: "";
  display: inline-block;
  width: $spacing-sm;
  height: $icon;
  background-color: $primary;
  mask-image: url("@images/arrow-down.svg");
  mask-repeat: no-repeat;
}

.learning-course.collapsable[open] .collapse-btn:after {
  mask-image: url("@images/arrow-up.svg");
}

.learning-course-button {
  width: 100px;
  height: 100%;
  min-height: $spacing-xxl;
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.learning-course.locked .learning-course-button {
  border-width: 0 $border-width 0 0;
  border-color: $white;
}

.learning-course-button .icon {
  font-size: $icon-xl;
  height: $icon-xl;
}

.learning-course-content {
  padding: $spacing-sm;
}

.learning-course-modules {
  display: grid;
  gap: $spacing-xs;
  padding: $spacing-sm;
  background-color: $gray-lighter;
  border-radius: 0 0 $border-radius $border-radius;
}

.learning-course-statusrow {
  display: flex;
  flex-wrap: wrap;
}

.learning-course-statusrow .text-with-icon {
  margin-right: $spacing-sm;
}


////// Learning activity //////

.grid-learning-activities {
  display: grid;
  gap: $grid-gutter-width;
  @include media-breakpoint-up(sm) {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  @include media-breakpoint-up(lg) {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
  }
  @include media-breakpoint-up(xl) {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  @include media-breakpoint-up(2xl) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

}

.learning-activity {
  position: relative;
  display: flex;
  flex-direction: row;
  background-color: $gray-lighter;
  border-radius: $border-radius;
}

.learning-activity-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 80px;
  height: 100%;
  min-height: 80px;
  border-right: $border-width solid $white;
  border-top-left-radius: $border-radius;
  border-bottom-left-radius: $border-radius;
}

.learning-activity-badge .icon {
  font-size: $icon-lg;
  height: $icon-lg;
}

.learning-activity-content {
  padding: $spacing-sm;
}

.learning-activity.locked .learning-activity-badge {
  background-image: url("@images/pattern-stripes-transparent.png");
  background-repeat: repeat;
}

.learning-activity.locked .learning-activity-badge .icon {
  color: $disabled;
}

.learning-activity.unlocked {
  overflow: hidden;
}

.learning-activity.unlocked .learning-activity-badge {
  color: $white;
  background-color: $success;
}

.learning-activity.unlocked:after {
  position: absolute;
  display: block;
  transform: rotate(45deg);
  content: "";
  background-color: $success;
  width: 100px;
  height: 25px;
  right: -25px;
  top: 10px;
}

.learning-activity.unlocked:before {
  position: absolute;
  display: block;
  content: "";
  background-color: $white;
  width: 15px;
  height: 15px;
  right: 17px;
  top: 17px;
  mask-image: url("@images/check-thick.svg");
  mask-repeat: no-repeat;
  z-index: 1;
}

.learning-activity.unlocked .learning-activity-content {
  padding-right: $spacing-lg;
}