/* <link rel="stylesheet" href="{ basePath }/sfsites/c/resource/ecommStyle/css/components/lightning-checkbox.css?{ versionKey }"/> */

/* Checkbox Group Label */

lightning-checkbox-group .slds-form-element__label {
    margin: var(--ecomm-form-group-label-margin);
    padding: var(--ecomm-form-group-label-padding);
    color: var(--ecomm-form-group-label-color);
}

/* Checkbox Group Label Disabled */

lightning-checkbox-group:not(.slds-has-error):has([type="checkbox"]:disabled) .slds-form-element__label {
    color: var(--ecomm-form-group-label-disabled-color);
}

/* Checkbox Group Label Error */

lightning-checkbox-group.slds-has-error .slds-form-element__label {
    color: var(--ecomm-form-group-label-error-color);
}

/* Checkbox Group Label Required */

lightning-checkbox-group .slds-form-element__label .slds-required {
    margin: var(--ecomm-form-group-label-required-margin);
    color: var(--ecomm-form-group-label-required-color);
}

/* Checkbox Items */

lightning-checkbox-group .slds-checkbox + .slds-checkbox,
.ecomm-checkbox-group .slds-checkbox + .slds-checkbox,
.ecomm-checkbox-group .ecomm-checkbox + .ecomm-checkbox {
    margin-top: 0.5rem;
}

/* Checkbox */

lightning-input .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-right: 0 !important;
    border-color: var(--ecomm-color-form-checkbox-border);
    border-width: var(--ecomm-form-borders-checkbox-border-width);
    border-radius: var(--ecomm-form-borders-checkbox-border-radius);
    background-color: var(--ecomm-color-form-checkbox-background);
    cursor: pointer;
    transition:
        border-color var(--ecomm-transition-color),
        background-color var(--ecomm-transition-background-color),
        box-shadow var(--ecomm-transition-box-shadow);
}

/* Checkbox Icon */

lightning-input .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::after,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::after,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux::after {
    content: var(--ecomm-form-icon-checkbox);
    display: block;
    position: relative;
    left: -0.125rem;
    top: -0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    transform: unset;
}

/* Checkbox Error */

lightning-input.slds-has-error .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox.slds-has-error .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group.slds-has-error .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-form-element-error-border-color);
    background-color: var(--ecomm-color-form-checkbox-background);
}

/* Checkbox Checked */

lightning-input .slds-checkbox [type="checkbox"]:not(:disabled):checked + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:not(:disabled):checked + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:not(:disabled):checked + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-color-form-selected-checkbox-border);
    background-color: var(--ecomm-color-form-selected-checkbox-background);
}

/* Checkbox Checked Error */

lightning-input.slds-has-error .slds-checkbox [type="checkbox"]:not(:disabled):checked + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox.slds-has-error .slds-checkbox [type="checkbox"]:not(:disabled):checked + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group.slds-has-error .slds-checkbox [type="checkbox"]:not(:disabled):checked + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-form-element-error-border-color);
    background-color: var(--ecomm-form-element-error-border-color);
}

/* Checkbox Hover */

lightning-input .slds-checkbox [type="checkbox"]:not(:disabled):hover + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:not(:disabled):hover + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:not(:disabled):hover + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-form-element-border-color-hover);
    background-color: var(--ecomm-color-form-checkbox-background);
    box-shadow: var(--ecomm-form-element-box-shadow-hover);
}

/* Checkbox Focus */

lightning-input .slds-checkbox [type="checkbox"]:not(:disabled):focus + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:not(:disabled):focus + .slds-checkbox__label .slds-checkbox_faux,
lightning-input .slds-checkbox [type="checkbox"]:not(:disabled):active + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:not(:disabled):active + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:not(:disabled):focus + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:not(:disabled):active + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-color-form-checkbox-border);
    background-color: var(--ecomm-color-form-checkbox-background);
    box-shadow: var(--ecomm-form-element-box-shadow-focus);
}

/* Checkbox Checked Hover */

lightning-input .slds-checkbox [type="checkbox"]:checked:not(:disabled):hover + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:checked:not(:disabled):hover + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:checked:not(:disabled):hover + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-color-form-selected-checkbox-border);
    background-color: var(--ecomm-color-form-selected-checkbox-background);
    box-shadow: var(--ecomm-form-element-box-shadow-hover);
}

/* Checkbox Checked Focus */

lightning-input .slds-checkbox [type="checkbox"]:checked:not(:disabled):focus + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:checked:not(:disabled):focus + .slds-checkbox__label .slds-checkbox_faux,
lightning-input .slds-checkbox [type="checkbox"]:checked:not(:disabled):active + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:checked:not(:disabled):active + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:checked:not(:disabled):focus + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:checked:not(:disabled):active + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-color-form-selected-checkbox-border);
    background-color: var(--ecomm-color-form-selected-checkbox-background);
    box-shadow: var(--ecomm-form-element-box-shadow-focus);
}

/* Checkbox Disabled */

lightning-input .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-form-element-disabled-border-color);
    background-color: var(--ecomm-color-form-checkbox-background);
    box-shadow: none;
    cursor: not-allowed;
}

/* Checkbox Disabled Error */

lightning-input.slds-has-error .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox.slds-has-error .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group.slds-has-error .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-form-element-error-border-color);
    background-color: var(--ecomm-color-form-checkbox-background);
}

/* Checkbox Checked Disabled */

lightning-input .slds-checkbox [type="checkbox"]:checked:disabled + .slds-checkbox__label .slds-checkbox_faux,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:checked:disabled + .slds-checkbox__label .slds-checkbox_faux,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:checked:disabled + .slds-checkbox__label .slds-checkbox_faux {
    border-color: var(--ecomm-form-element-disabled-border-color);
    background-color: var(--ecomm-form-element-disabled-border-color);
}

/* Checkbox label */

lightning-input .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-form-element__label,
.ecomm-checkbox .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-form-element__label,
lightning-checkbox-group .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-form-element__label {
    display: inline-block;
    margin: 0;
    padding: var(--ecomm-form-checkbox-label-padding);
    font-size: var(--ecomm-form-checkbox-label-font-size);
    line-height: var(--ecomm-form-checkbox-label-line-height);
    font-weight: var(--ecomm-form-checkbox-label-font-weight);
    color: var(--ecomm-form-checkbox-label-color);
    cursor: pointer;
    transition: color var(--ecomm-transition-color);
}

/* Checkbox Label Disabled */

lightning-input .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-form-element__label,
.ecomm-checkbox .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-form-element__label,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-form-element__label {
    color: var(--ecomm-form-checkbox-label-disabled-color);
    cursor: not-allowed;
}

/* Checkbox Label Required */

lightning-input .slds-checkbox .slds-required ,
.ecomm-checkbox .slds-checkbox .slds-required {
    display: none;
}

lightning-input .slds-checkbox .slds-required ~ .slds-checkbox__label .slds-form-element__label::after,
.ecomm-checkbox .slds-checkbox .slds-required ~ .slds-checkbox__label .slds-form-element__label::after {
    display: inline;
    content: var(--ecomm-form-label-required-content);
    margin-left: 0.25rem;
    color: var(--ecomm-form-label-required-color);
    cursor: help;
}

/* Checkbox Helptext */

lightning-input lightning-primitive-input-checkbox .slds-form-element__help,
.ecomm-checkbox lightning-primitive-input-checkbox .slds-form-element__help,
lightning-checkbox-group .slds-form-element__help {
    font-family: var(--ecomm-form-caption-text-font-family);
    font-size: var(--ecomm-form-caption-text-font-size);
    font-style: var(--ecomm-form-caption-text-font-style);
    font-weight: var(--ecomm-form-caption-text-font-weight);
    text-decoration: var(--ecomm-form-caption-text-text-decoration);
    text-transform: var(--ecomm-form-caption-text-text-transform);
    /* line-height: var(--ecomm-form-caption-text-line-height); */
    line-height: var(--ecomm-form-helptext-line-height); /* It's important for helptext height */
    letter-spacing: var(--ecomm-form-caption-text-letter-spacing);
    color: var(--ecomm-form-helptext-color);
    transition: color var(--ecomm-transition-color);
}

lightning-input.slds-has-error lightning-primitive-input-checkbox .slds-form-element__help,
.ecomm-checkbox.slds-has-error lightning-primitive-input-checkbox .slds-form-element__help,
lightning-checkbox-group.slds-has-error .slds-form-element__help {
    color: var(--ecomm-form-helptext-error-color);
}

lightning-input lightning-primitive-input-checkbox .slds-form-element__help,
.ecomm-checkbox lightning-primitive-input-checkbox .slds-form-element__help,
lightning-checkbox-group .slds-form-element__help {
    padding-left: 2rem;
}