.variation_gallery {
  --variation-gallery-thumbnail-width: 64px;
  --variation-gallery-thumbnail-height: 64px;
  border-bottom: 1px #ddd solid;
  clear: both;
}

.variation_gallery__images {
  display: flex;
  flex-direction: row;
}

.variation_gallery__image {
  position: relative;
  overflow: hidden;
  width: var(--variation-gallery-thumbnail-width);
  height: var(--variation-gallery-thumbnail-height);
  margin-right: 4px;
  border: 1px #ddd solid;
  cursor: pointer;
}
.variation_gallery__image img {
  width: auto;
  height: var(--variation-gallery-thumbnail-height);
}
.variation_gallery__image.disabled {
  cursor: default;
}
.variation_gallery__image:not(.disabled):hover:before {
  position: absolute;
  line-height: var(--variation-gallery-thumbnail-height);
  font-size: var(--variation-gallery-thumbnail-height);
  font-family: dashicons;
  color: #00a0d2;
  content: "\f335";
}

.variation_gallery__image--placeholder {
  background: #f4f4f4;
}
.variation_gallery__image--placeholder:before, .variation_gallery__image--placeholder:hover:before {
  position: absolute;
  line-height: var(--variation-gallery-thumbnail-height);
  font-size: var(--variation-gallery-thumbnail-height);
  font-family: dashicons;
  color: #fff;
  content: "\f129";
}