@import "cards";
@import "variables";
@import "colors";
@import "mixins";
$card-margin: 15px;
$icon-part-width: 120px;

.achievements-row {
  margin: 0 -#{15px + $card-margin} !important;
}

.achievement-card {
  @extend .card-1-static;

  margin: 0 $card-margin 50px $card-margin;
  height: 160px;
  background: white;
}

.achievement-card-icon {
  vertical-align: top;
  display: inline-block;
  padding-top: 25px;
  padding-left: 13px;
  width: $icon-part-width;
}

.achievement-card-info {
  display: inline-block;
  vertical-align: top;
  padding-top: 20px;
  padding-right: 20px;
  line-height: 1;
  width: calc(100% - #{$icon-part-width});
  position: relative;
  height: 100%;
}

.achievement-card-progress {
  line-height: 1.5;
  padding-right: 20px;
  position: absolute;
  width: 100%;
  bottom: 15px
}

.achievement-icon {
  position: relative;
}

.achievement-icon-badge {
  margin-left: 3px;
  width: 90px;
  height: 90px;
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(to right, $bright-blue-color 50%,$blue-color 50%);
  box-shadow: 0px 0px 12px -3px rgba(0,0,0,0.7);
}

.achievement-icon-badge.finished{
  background: white;
  border-color: $light-blue-color;
  border-style: solid;
  border-width: 2px;
}

.achievement-image img {
  width: 70px;
}

.achievement-icon-image img {
  width: 70px;
  position: absolute;
  left: 13px;
  top: 10px;
}

.achievement-icon-image.finished img {
  width: 60px;
  left: 17px;
  top: 15px;
}

.achivements-earned {
  padding: 0 0 0px 0;
}

.achivements-to-earn {
  padding: 0 0 50px 0;
}

.achievement-circle-icon .achievement-icon-badge {
  position: relative !important;
}

.achievement-circle-info {
  padding-top: 10px;
}