.related-products {
  display: table;
}

.related-products__label {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  padding-right: 10px;
}

.related-products__list {
  display: flex;
  align-items: center;
  font-size: 0;
}

.related-products__item {
  position: relative;
  display: inline-block;
  vertical-align: top;
  border: 2px solid #cdcdcd;
  padding: 4px;
  margin: 5px 10px 5px 0;
  border-radius: 50%;
}


.related-products__item.is-active{
  border-color: #a1bf36;
  background-color: #fff;
}

.is-disabled .related-products__ico{
  opacity: 0.7;
}

/* Active icon is bigger */
.related-products__item.is-active .related-products__ico{
  width: 32px;
  height: 32px;
}


.related-products__item.is-disabled:after{
  position: absolute;
  top: 50%;
  left: 0;
  content: '';
  width: calc(100% + 1px);
  height: 1px;
  background-color: #cdcdcd;
  transform: rotate(-45deg);
}

.related-products__item:active {
  box-shadow: inset 0 0 2px #818181;
}

.related-products__ico {
  display: block;
  width: 26px;
  height: 26px;
  border: 1px solid #eee;
  border-radius: 50%;
}

.related-products__color {
  float: left;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}