$checkbox: '.gdpr-confirm-policy input[type="checkbox"]', '.comment-form input[type="checkbox"]', '#ship-to-different-address-checkbox', '.woocommerce-form__input[type="checkbox"]', '#wc-stripe-new-payment-method[type="checkbox"]', '.ct-login-form input[type="checkbox"]', '.wpforms-container:not(.wpforms-container-full) input[type="checkbox"]' ; $radiobox: '.wc_payment_method > input[type="radio"]', '.woocommerce-shipping-methods input[type="radio"]', '.mp-ticket-payments input[type="radio"]', '.wpforms-container:not(.wpforms-container-full) input[type="radio"]' ; // common styles #{$checkbox}, #{$radiobox} { display: inline-block; vertical-align: baseline; position: relative; top: var(--top, 3px); min-width: 16px; width: 16px; height: 16px; padding: 0 !important; margin: var(--cr-margin, 0 0.7em 0 0); border-width: var(--formBorderSize); border-style: solid; cursor: pointer; -webkit-appearance: none; &:before { position: absolute; content: ''; z-index: 2; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; margin: auto; } &:not(:checked) { background: rgba(255, 255, 255, 0.5); border-color: var(--radioCheckboxInitialColor); } &:checked { border-color: var(--radioCheckboxAccentColor) !important; background: var(--radioCheckboxAccentColor) !important; &:before { opacity: 1; } } &:focus { outline: none; border-color: var(--radioCheckboxAccentColor) !important; } } // checkbox only #{$checkbox} { border-radius: 3px; &:before { top: -2px; width: 8px; height: 5px; border: 2px solid #fff; border-top: none; border-right: none; transform: rotate(-45deg); } } // radiobox only #{$radiobox} { border-radius: 100% !important; &:before { width: 6px; height: 6px; background: #fff; border-radius: inherit; } }