@import "colors";
@import "mixins";
@import "variables";
@import "fonts";
@import "icons";
@import "animations/bounce";


$header-height: 200px;
$image-size: 212px;


.tasks-header-bar {
  background-color: $blue-color;
  min-height: $header-height;
  margin-top: -5px
}

.tasks-header {
  min-height: $header-height;
  position: relative;
  padding-top: 16px;
}

.tasks-header-extended {
  height: 220px !important;
}

.tasks-header-info {
  margin-top: 25px;
}

.tasks-header-info-text {
  color: white;
  display: inline-block;
  margin-bottom: 20px;
  margin-left: 20px;
}

.tasks-header-image {
  position: absolute;
  right: 0;
  bottom: -60px;
  width: $image-size;
  height: $image-size;
}

.tasks-header-icon img {
  margin-top: -33px;
  width: 80px;
}

.tasks-header-progress {
  margin-top: 15px;
  margin-bottom: 10px;
  margin-right: 340px;

  @media screen and (max-width: map-get($screen-widths, 'md')) {
    margin-right: 0px;
  }
}

.tasks-summary-bar {
  margin-top: -5px;
  background: white;
}

.tasks-summary {
  padding-top: 25px;
  min-height: 80px;
  width: 100%;
}

.task-cards {
  margin-bottom: 10px;
  @media screen and (min-width: map-get($screen-widths, 'lg')) {
    border-right: solid 1px #b2b2b3;
    padding-right: 100px;
    margin-bottom: 40px;
  }
  margin-right: 10px;
}

.task-cards.noline {
  border-right: none !important;
  padding-right: 0 !important;
  margin-bottom: 10px !important;
}

.task-card {
  @extend .small;
  padding: 10px 0 12px 0;
  cursor: pointer;
}

.task-card.locked {
  cursor: not-allowed;
  color: $grey-color;
}

.task-card.unlocked {
  color: $blue-color;
}

.task-card.finished {
  cursor: default;
  color: $green-color;
}

.task-card.permanent {
  color: $dark-orange-color;
}

.task-card a {
  @extend .dark-color-orange;
}

.task-card:hover {
  text-decoration: underline !important;
}

.task-card.finished:hover {
  text-decoration: none !important;
}

.task-card:nth-child(odd) {
  @include horizontal_gradient($green-color);
}

.task-card:nth-child(odd).unlocked {
  @include horizontal_gradient($blue-color);
}

.task-card:nth-child(odd).locked {
  @include horizontal_gradient($grey-color);
}

.task-card:nth-child(odd).permanent {
  @include horizontal_gradient($light-orange-color);
}

.tasks-introduction {
  padding: 50px 0;
}

.tasks-achievements-introduction {
  padding: 50px 0;
}

.task-card-icon {
  position: absolute;
  margin-top: -5px;
}

.item-header-info-text {
  color: white;
  display: inline-block;
  margin-bottom: 30px;
}