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


.product-card .card-header {
  display: flex;
  flex-direction: row;
  padding-top: 0;
  padding-bottom: 0;
  background-color: $card-bg-gray;
  border: none;
}

.product-card .card-icon {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: $spacing-xxl;
  min-height: $spacing-xxl;
  background-color: $primary;
  border-top-left-radius: $border-radius-lg;
  color: $white;

  & .icon {
    font-size: $icon-lg;
    height: $icon-lg;
  }
}

.product-card.product-website .card-icon {
  background-color: $color-product-website;
}

.product-card.product-ios .card-icon {
  background-color: $color-product-apple;
}

.product-card.product-android .card-icon {
  background-color: $color-product-android;
}

.product-card.product-streaming .card-icon {
  background-color: $color-product-streaming;
}

.product-card.product-gaming .card-icon {
  background-color: $color-product-gaming;
}

.product-card .card-icon,
.product-card.product-website .card-icon,
.product-card.product-ios .card-icon,
.product-card.product-android .card-icon,
.product-card.product-streaming .card-icon,
.product-card.product-gaming .card-icon {
  &:hover, &:focus, &:active {
    background-color: $link-hover-color;
  }
}


.product-card .card-info {
  display: flex;
  flex-direction: column;
  padding: $spacing-sm;
  padding-right: $spacing;
  line-height: 1;
}

.product-card .card-title {
  margin-bottom: $spacing-xxs;
  padding: 0;
  color: $black;
  vertical-align: auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; 
  &:hover, &:focus, &:active {
    color: $link-hover-color;
  }
  & h2, & h3, & h4, & h5 {
    font-size: $font-size-h5;
    margin-bottom: 0;
  }
}

.product-card .badge-producttype {
  position: absolute;
  top: $spacing-xs;
  right: $spacing-xs;
  color: $gray-darker;
}

.product-card .card-content {
  position: relative;
  padding: $spacing-sm;
  background-color: $card-bg-gray;
  border-top: $border-width solid $white;
}

.product-card .card-test-item {
  flex-shrink: 0;
  position: relative;
  display: flex;
  margin-top: $spacing-xs;

  &:first-child {
    margin-top: 0;
  }
}

.card-test-item .test-label {
  margin-left: $spacing-xs;
  margin-top: 3px;
  color: $label-color;
  font-size: $font-size-label-sm;
}

.card-test-item .metrics {
  margin-left: auto;
  padding-left: $spacing-sm;
}

.card-test-item .progress {
  position: absolute;
  appearance: none;
  width: 100%;
  height: 2px;
  bottom: -2px;
  padding-left: $spacing;
  
  &::-webkit-progress-bar {
    background-color: $gray-light;
  }
  &::-webkit-progress-value {
    background-color: $success;
  }
}

// Product sections


.card-section {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background-color: $card-bg-gray;
  border-top: $border-width solid $white;
}

.card-section:last-child {
  flex-grow: 1;
}

.card-section::before {
  content: "";
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: $info;
  border-bottom-left-radius: $border-radius-lg;
}

.card-section-header {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  padding-left: $spacing-sm;
  width: 100%;
}

.card-section-header::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: $icon;
  height: $icon;
  top: $spacing-xs;
  left: $spacing-sm;
  background-color: $info;
  mask-image: url("@images/section.svg");
  mask-repeat: no-repeat;
}

.section-info {
  padding-top: $spacing-xs;
  padding-left: $spacing;
  padding-bottom: $spacing-xs;
}

.card-section-actions {
  display: flex;
  margin-left: auto;
}

.card-section-actions .btn {
  height: 100%;
  width: $btn-sm-height;
  padding: 0;
  padding-top: $spacing-xs;
  border-radius: 0;
  justify-content: center;
  align-items: start;
}

.product-card .btn-collapse:hover,
.product-card .btn-collapse:focus,
.product-card .btn-collapse:active {
  &::before {
    background-color: $white;
  }
}

.product-card .btn-collapse::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: $icon;
  mask-image: url("@images/arrow-down.svg");
  mask-repeat: no-repeat;
  background-color: $primary;
}

details.card-section[open] .btn-collapse::before {
  mask-image: url("@images/arrow-up.svg");
}

details.card-section[open] .card-section-header {
  margin-bottom: 1px;
}

.card-section-content {
  padding: 0 $spacing-sm $spacing-sm $spacing-sm;
}

.card-section.orange::before,
.card-section.orange .card-section-header::before {
  background-color: $orange;
}

.card-section.green::before,
.card-section.green .card-section-header::before {
  background-color: $green;
}

.card-section.yellow::before,
.card-section.yellow .card-section-header::before {
  background-color: $yellow;
}

.card-section.red::before,
.card-section.red .card-section-header::before {
  background-color: $red-light;
}

.card-section.pink::before,
.card-section.pink .card-section-header::before {
  background-color: $pink;
}

.card-section.purple::before,
.card-section.purple .card-section-header::before {
  background-color: $purple;
}