:root {
    --xwsf-checkbox-size: 20px;
    --xwsf-checkbox-spacing: 5px;
    --xwsf-grid-gutter: 20px;
    --xwsf-border-width: 2px;
    --xwsf-focus-shadow: rgb(0 0 0 / 15%);
    --x-wsf-step-size: 39px;
}

[data-x-wsf] {
    width: 100%;
}

.brxe-xwsforms .wsf-form input[type=radio].wsf-field + label.wsf-label,
.brxe-xwsforms .wsf-form input[type=checkbox].wsf-field + label.wsf-label {
    display: flex;
    align-items: center;
    -webkit-padding-start: calc(var(--xwsf-checkbox-spacing) + var(--xwsf-checkbox-size) );
    padding-inline-start: calc(var(--xwsf-checkbox-spacing) + var(--xwsf-checkbox-size) );
}

.brxe-xwsforms input[type=radio].wsf-field + label.wsf-label:after,
.brxe-xwsforms input[type=checkbox].wsf-field + label.wsf-label:after {
    top: unset;
}

.brxe-xwsforms .wsf-grid {
    margin-left: calc(0px - (var(--xwsf-grid-gutter)/2));
    margin-right: calc(0px - (var(--xwsf-grid-gutter)/2));
}

.brxe-xwsforms .wsf-tile {
    padding-left: calc( var(--xwsf-grid-gutter)/2 );
    padding-right: calc( var(--xwsf-grid-gutter)/2 );
}

.brxe-xwsforms input[type=date].wsf-field:focus, 
.brxe-xwsforms input[type=datetime-local].wsf-field:focus, 
.brxe-xwsforms input[type=file].wsf-field:focus, 
.brxe-xwsforms input[type=month].wsf-field:focus, 
.brxe-xwsforms input[type=password].wsf-field:focus, 
.brxe-xwsforms input[type=search].wsf-field:focus, 
.brxe-xwsforms input[type=time].wsf-field:focus, 
.brxe-xwsforms input[type=week].wsf-field:focus, 
.brxe-xwsforms input[type=email].wsf-field:focus, 
.brxe-xwsforms input[type=number].wsf-field:focus, 
.brxe-xwsforms input[type=tel].wsf-field:focus, 
.brxe-xwsforms input[type=text].wsf-field:focus, 
.brxe-xwsforms input[type=url].wsf-field:focus, 
.brxe-xwsforms select.wsf-field:focus, 
.brxe-xwsforms textarea.wsf-field:focus,
.brxe-xwsforms input[type=checkbox].wsf-field:focus + label.wsf-label:before,
.brxe-xwsforms input[type=radio].wsf-field:focus + label.wsf-label:before,
.brxe-xwsforms .wsf-form ul.wsf-group-tabs.wsf-steps > li > a:not(.wsf-tab-disabled):focus:before,
.brxe-xwsforms input[type=checkbox].wsf-field.wsf-image:focus + label.wsf-label > img,
.brxe-xwsforms input[type=radio].wsf-field.wsf-image:focus + label.wsf-label > img,
.brxe-xwsforms input[type=range].wsf-field:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--xwsf-focus-shadow)!important;
}

.brxe-xwsforms input[type=radio].wsf-field:checked + label.wsf-label:after {
    background: #fff;
    transform: scale(.5);
    border-radius: 100px;
    transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
}

.brxe-xwsforms input[type=checkbox].wsf-field:checked + label.wsf-label:after {
    background: #fff;
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
    -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 50%;
    -webkit-mask-size: 50%;
    mask-position: center;
    -webkit-mask-position: center;
    transition: background-color 200ms ease-in-out, border-color 200ms ease-in-out;
}

.brxe-xwsforms select.wsf-field:not([multiple]):not([size])  {
    height: auto;
}

.brxe-xwsforms .wsf-form ul.wsf-group-tabs.wsf-steps > li > a:before {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--x-wsf-step-size);
    width: var(--x-wsf-step-size);
}

.brxe-xwsforms .wsf-form ul.wsf-group-tabs.wsf-steps > li > a:after {
    top: calc(var(--x-wsf-step-size) / 2);
}

[data-x-wsf] .iti__arrow:not(.iti__arrow--up) {
    color: #555;
    border-top: 4px solid currentColor;
}

[data-x-wsf] .iti__arrow--up {
    border-bottom: 4px solid currentColor;
}