ezfy-color-variants-css.liquid

<style>
      .EzfyColorVariants{
      display: flex;
        opacity: 0;
        transition: all .32s;
        align-items: center;
        flex-wrap: wrap;
  }

  input[name="Color"] + *{
    opacity: 0;
  }
.EzfyColorVariants--loaded input[name="Color"] + *,
      .EzfyColorVariants--loaded{
    opacity: 1;
           transition: all .32s;
        display: flex;
      }

      .EzfyColorVariants-swatch label{
    margin: 0 !important;
}

.EzfyColorVariants-swatch{
    margin: 3px 5px;
}

.EzfyColorVariants-swatch:first-child{
    margin-left: 0;
}

  .EzfyColorVariants-swatch--has-color{
      width: 33px;
      height: 33px;
      border-radius: 50%;
      position: relative;
      display: inline-block;
      overflow: hidden;
    margin: 3px 5px;
  }
  .EzfyColorVariants-swatch--has-color label >span{
    display: none;
  }

      .EzfyColorVariants-swatch--has-color label{
      width: 33px;
      height: 33px;
      border-radius: 50%;
      margin: unset !important;
        padding: unset !important;
            font-size: 0 !important;
    background: unset !important;
  }


   .EzfyColorVariants-swatch--has-color .EzfyColorVariants-color{
      position: absolute;
      width: 26px;
      height: 26px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
    display: inline-block;
      display: block !important;
    pointer-events: none;
    object-fit: contain;
  }

  .EzfyColorVariants-swatch--has-color{
    display: flex;
  }


  .product-form__input  .EzfyColorVariants-swatch--has-color input[type=radio] + *{
            border: 2px solid  rgba(0, 0, 0, 0.1) !important;
  }
  .product-form__input  .EzfyColorVariants-swatch--has-color input[type=radio]:checked + *{
          background: unset !important;
         border: 2px solid  rgba(0, 0, 0, 0.4) !important;
  }
</style>