.components-dropdown.sp-swatches-color {
  display: flex;
}

.product-variation-color-wrapper {
  border: 1px solid #dadada;
  background: #fff;
}
.product-variation-color-wrapper .component-color-indicator {
  margin: 0;
  min-width: 36px;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  border: none;
  border-left: 1px solid #dadada;
  border-radius: 0;
}
.product-variation-color-wrapper .components-base-control {
  display: inline-block;
  vertical-align: top;
  border: none;
}
.product-variation-color-wrapper .components-base-control .components-base-control__field {
  margin: 0;
}
.product-variation-color-wrapper .components-base-control .components-base-control__field input {
  margin: 0;
  border: none;
  width: 100%;
}

.sp-vswatch-preview-wrap {
  overflow: hidden;
}
.sp-vswatch-preview-wrap.round {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #dadada;
}
.sp-vswatch-preview-wrap .sp-vswatch-image-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
}
.sp-vswatch-preview-wrap .sp-vswatch-color-preview {
  width: 100%;
  height: 100%;
  display: block;
}
.sp-vswatch-preview-wrap .sp-vswatch-label-preview {
  padding: 5px 10px;
  border: 1px solid #dadada;
  display: block;
  width: fit-content;
  border-radius: 5px;
}
.sp-vswatch-preview-wrap.sp-vswatch-empty.image {
  background-image: url("data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CiAgICA8cGF0aCBmaWxsPSIjZGFkYWRhIiBkPSJNNDY0IDY0SDQ4QzIxLjQ5IDY0IDAgODUuNDkgMCAxMTJ2Mjg4YzAgMjYuNTEgMjEuNDkgNDggNDggNDhoNDE2YzI2LjUxIDAgNDgtMjEuNDkgNDgtNDhWMTEyYzAtMjYuNTEtMjEuNDktNDgtNDgtNDh6bS02IDMzNkg1NGE2IDYgMCAwIDEtNi02VjExOGE2IDYgMCAwIDEgNi02aDQwNGE2IDYgMCAwIDEgNiA2djI3NmE2IDYgMCAwIDEtNiA2ek0xMjggMTUyYy0yMi4wOTEgMC00MCAxNy45MDktNDAgNDBzMTcuOTA5IDQwIDQwIDQwIDQwLTE3LjkwOSA0MC00MC0xNy45MDktNDAtNDAtNDB6TTk2IDM1MmgzMjB2LTgwbC04Ny41MTUtODcuNTE1Yy00LjY4Ni00LjY4Ni0xMi4yODQtNC42ODYtMTYuOTcxIDBMMTkyIDMwNGwtMzkuNTE1LTM5LjUxNWMtNC42ODYtNC42ODYtMTIuMjg0LTQuNjg2LTE2Ljk3MSAwTDk2IDMwNHY0OHoiPjwvcGF0aD4KPC9zdmc+Cg==");
  background-repeat: no-repeat;
  background-position: center;
}
.sp-vswatch-preview-wrap.sp-vswatch-empty.color {
  background: repeating-linear-gradient(-45deg, #dadada, #dadada 3px, #ffffff 3px, #ffffff 10px);
}

.components-button.sp-vs-image-toggle.placeholder {
  width: 250px;
  height: 90px;
  background-color: #f0f0f0;
  justify-content: center;
  border: 1px solid #dadada;
}
.components-button.sp-vs-image-toggle.placeholder:hover {
  background-color: #ddd;
}

.sp-vs-image-toggle.image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 90px;
  width: 250px;
  border: 1px solid #dadada;
  cursor: pointer;
  display: block;
  z-index: 100;
}

.sp-vs-buttons-wrapper .components-button {
  margin-top: 14px;
}
.sp-vs-buttons-wrapper .components-button.is-link {
  display: block;
  margin-top: 14px;
}