.extra-product-field{
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;

    label{
        font-size: 1rem;
        position: relative;
        padding-left: 40px;
        display: flex;
        flex-direction: row;
        align-items: center;

        input[type="checkbox"]{
            position: absolute;
            opacity:0;
            cursor:pointer;
            height:0;
            width:0;
        }

        .checkmark{
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            height: 25px;
            width: 25px;
            background-color: #eee;
            border-radius: 50%;
        }
    }
}

.extra-product-field:hover input ~ .checkmark {
  background-color: #ccc;
  transition: 0.2s ease-in-out;
}

.extra-product-field input:checked ~ .checkmark {
  background-color: var(--theme-palette-color-1);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.extra-product-field input:checked ~ .checkmark:after {
  display: block;
}

.extra-product-field .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}