////// Collapsable card //////

.card-collapsable {
  background-color: $gray-lightest;
  border: 0;
}

.card-collapsable .card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: $spacing;
  padding-right: $spacing-xs;
  border-bottom: 0;
}

.card-collapsable > .card-header::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: $spacing-sm;
  height: $icon;
  top: 13px;
  left: $spacing-sm;
  background-color: $primary;
  mask-image: url("@images/caret-right.svg");
  mask-repeat: no-repeat;
}

.card-collapsable[open] > .card-header::before {
  mask-image: url("@images/caret-down.svg");
}

.card-collapsable .card-header:hover {
  &::before {
    background-color: $link-hover-color;
  }
  .card-title {
    color: $link-hover-color;
  }
}

.card-collapsable > .card-header .card-title {
  padding: 0;
  font-size: $font-size-label;
  font-weight: $font-weight-semibold;
  text-transform: uppercase;
}

.card-collapsable .card-header-actions {
  display: flex;
  flex-direction: row;
}

.card-collapsable .card-body {
  padding-top: 0;
}

.card-collapsable .course-badge {
  margin-left: 0;
}