$collection-item-size: 66px !default;
$collection-item-border-radius: 50% !default;
$collection-item-border-color: $border-color !default;
$collection-item-border-color-active: $text-dark !default;
$collection-title-color: #8b8b8b !default;

.product-collections-header {
   color: $text-dark;
   display: flex;
   align-items: baseline;
   margin-bottom: 10px;
   margin-top: 10px;
   font-size: $font-size-larger;

   p {
      font-weight: $font-weight-medium;
      margin: 0 10px 0 0;
   }

   span {
      color: $collection-title-color;
   }
}

.product-collections {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 20px;
}

.product-collection-item {
   @include underline-never;

   border: 1px solid $collection-item-border-color;
   border-radius: $collection-item-border-radius;
   margin-right: $grid-gutter-width;
   margin-bottom: $grid-gutter-width;
   padding: 5px;
   height: $collection-item-size;
   width: $collection-item-size;
   transition: border-color $transition-speed;

   &.active,
   &:hover,
   &:active,
   &:focus {
      border-color: $collection-item-border-color-active;
   }

   img {
      border-radius: $collection-item-border-radius;
   }
}

@media screen and (min-width: $xl) and (max-width: 1479px),
screen and (min-width: $lg) and (max-width: 1139px),
screen and (max-width: $sm - 1) {
   .product-collections {
      flex-wrap: wrap;
   }

   .product-collection-item {
      margin-bottom: $grid-gutter-width;
   }
}
