html {
    --plenta-icon-checkbox-background-color: #FCECEF;
    --plenta-icon-checkbox-background-color-active: #FCECEF;
    --plenta-icon-checkbox-border: 2px solid #FCECEF;
     --plenta-icon-checkbox-border-active: 2px solid var(--rosa);
    --plenta-icon-checkbox-border-radius: 10px;
    --plenta-icon-checkbox-padding: 20px;
    --plenta-icon-checkbox-grid-gap: 16px;
    --plenta-icon-checkbox-grid-min-width: calc((100% - (4 * 20px)) / 5);
    --plenta-icon-checkbox-label-align: center;
    --plenta-icon-checkbox-description-align: center;
    --plenta-icon-checkbox-image-align: center;
    --plenta-icon-checkbox-label-font-size: 1.2em;
    --plenta-icon-checkbox-description-font-size: 1em;
}

.widget-icon-checkbox {
    .checkbox_container, .radio_container {
        display: grid;
        grid-gap: var(--plenta-icon-checkbox-grid-gap);
        grid-template-columns: repeat(auto-fit, minmax(var(--plenta-icon-checkbox-grid-min-width), 1fr));

        > span {
            position: relative;

            input {
                position: absolute;
                opacity: 0;
            }

            label {
                display: flex;
                gap: 0.9em;
                flex-direction: column;
                margin: 0;
                border: var(--plenta-icon-checkbox-border);
                border-radius: var(--plenta-icon-checkbox-border-radius);
                background-color: var(--plenta-icon-checkbox-background-color);
                padding: var(--plenta-icon-checkbox-padding);
                cursor: pointer;
                height: 100%;
                box-sizing: border-box;
            }

            input:checked + label, label:hover, label:focus {
                background-color: var(--plenta-icon-checkbox-background-color-active);
                 border: var(--plenta-icon-checkbox-border-active);
            }
            
            input:checked + label:before {
                content: '';
                height: 40px;
                width: 40px;
                background: white;
                border:1px solid var(--rosa);
                position: absolute;
                right: 20px;
                top:20px;
                background: url(/files/theme/user/images/icons/check.webp) no-repeat scroll 50% 50% white;
                background-size:20px; 
                border-radius: 50%;
            }
        }
    }

    .icon-checkbox-icon {
        align-self: var(--plenta-icon-checkbox-image-align);
    }

    .icon-checkbox-label {
        text-align: var(--plenta-icon-checkbox-label-align);
        font-size: var(--plenta-icon-checkbox-label-font-size);
    }

    .icon-checkbox-description {
        text-align: var(--plenta-icon-checkbox-description-align);
        font-size: var(--plenta-icon-checkbox-description-font-size);
    }
}