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

/*
    1. Lightning Input
    2. Lightning Input (Search)
    3. Lightning Input (Date)
    4. Lightning Сombobox
    5. Lightning Textarea
    6. Lightning Input Address
    7. Lightning Checkbox, Lightning Checkbox Group
    8. Lightning Radio Group
    9. Lightning Select
    10. Lightning Tabset
    11. Quantity Selector
*/





/* 1. LIGHTNING INPUT */

/* Input Label */
lightning-input label.slds-form-element__label,
.ecomm-input label.slds-form-element__label {
    /* Setting in 'Experience Builder' */
    /* font-family: var(--dxp-s-form-element-label-font-family, 'Inter'); */        /* Forms -> Field Labels -> Font Family */
    /* font-size: var(--dxp-s-form-element-label-font-size, 0.875rem); */           /* Forms -> Field Labels -> Font Size */
    /* font-style: var(--dxp-s-form-element-label-font-style, normal); */           /* Forms -> Field Labels -> Font Style */
    /* font-weight: var(--dxp-s-form-element-label-font-weight, 400) !important; */ /* Forms -> Field Labels -> Font Weight */
    /* text-transform: var(--dxp-s-form-element-label-text-transform, none); */     /* Forms -> Field Labels -> Text Case */
    /* line-height: var(--dxp-s-form-element-label-line-height, 1.125rem); */       /* Forms -> Field Labels -> Line Height */
    /* letter-spacing: var(--dxp-s-form-element-label-letter-spacing, 0); */        /* Forms -> Field Labels -> Character Spacing */
    /* color: var(--dxp-s-form-element-label-color, #1D1D1E); */                    /* Colors -> Advanced -> Forms -> Field Label */

    margin-bottom: 0;
    padding-right: 0;
    padding-bottom: 0.25rem;
    line-height: 1.125rem;
    transition: color 0.1s;
}

/* Input Label Error */
lightning-input.slds-has-error label.slds-form-element__label,
.ecomm-input.slds-has-error label.slds-form-element__label {
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Input Label Required */
lightning-input label.slds-form-element__label .slds-required,
.ecomm-input label.slds-form-element__label .slds-required {
    margin-left: 0;
    margin-right: 0.25rem;
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Input */
lightning-input input.slds-input,
.ecomm-input input.slds-input {
    /* Setting in 'Experience Builder' */
    /* padding-top: var(--dxp-s-form-element-spacing-block-start, 11px); */       /* Forms -> Spacing -> Field Padding: Top */
    /* padding-right: var(--dxp-s-form-element-spacing-horizontal-end, 12px); */  /* Forms -> Spacing -> Field Padding: Right */
    /* padding-bottom: var(--dxp-s-form-element-spacing-block-end, 11px); */      /* Forms -> Spacing -> Field Padding: Bottom */
    /* padding-left: var(--dxp-s-form-element-spacing-horizontal-start, 12px); */ /* Forms -> Spacing -> Field Padding: Left */
    /* border-radius: var(--dxp-s-form-element-radius-border, 4px); */            /* Forms -> Borders -> Field Border Radius */
    /* border-width: var(--dxp-s-form-element-width-border, 1px); */              /* Forms -> Borders -> Field Border Weight */
    /* font-family: var(--dxp-s-form-element-text-font-family, 'Inter'); */       /* Forms -> Input Text -> Font Family */
    /* font-size: var(--dxp-s-form-element-text-font-size, 1rem); */              /* Forms -> Input Text -> Font Size */
    /* font-style: var(--dxp-s-form-element-text-font-style, normal); */          /* Forms -> Input Text -> Font Style */
    /* font-weight: var(--dxp-s-form-element-text-font-weight, 400); */           /* Forms -> Input Text -> Font Weight */
    /* text-transform: var(--dxp-s-form-element-text-text-transform, none); */    /* Forms -> Input Text -> Text Case */
    /* line-height: var(--dxp-s-form-element-text-line-height, 1.5rem); */        /* Forms -> Input Text -> Line Height */
    /* letter-spacing: var(--dxp-s-form-element-text-letter-spacing, 0); */       /* Forms -> Input Text -> Character Spacing */
    /* color: var(--dxp-s-form-element-text-color, #1D1D1E); */                   /* Colors -> Advanced -> Forms -> Input Text */
    /* background-color: var(--dxp-s-form-element-color-background, #FFFFFF); */  /* Colors -> Advanced -> Forms -> Field Background Fill */
    /* border-color: var(--dxp-s-form-element-color-border, #CBD6DF); */          /* Colors -> Advanced -> Forms -> Field Border */

    transition: color 0.1s, border-color 0.1s, background-color 0.1s, box-shadow 0.1s, outline 0.1s !important;
}

/* Input Readonly */
lightning-input input.slds-input[readonly],
.ecomm-input input.slds-input[readonly="true"] {
    font-size: var(--dxp-s-form-element-text-font-size, 1rem);
}

/* Input Error */
lightning-input.slds-has-error input.slds-input,
.ecomm-input.slds-has-error input.slds-input {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error);
}

/* Input Placeholder */
lightning-input input.slds-input::placeholder,
lightning-input input.slds-input::-webkit-input-placeholder,
.ecomm-input input.slds-input::placeholder,
.ecomm-input input.slds-input::-webkit-input-placeholder {
    /* color: var(--dxp-s-form-element-placeholder-text-color, #706E6B); */ /* Colors -> Advanced -> Forms -> Placeholder Text */
}

/* Input Hover */
lightning-input input.slds-input:not(:disabled):not([readonly]):hover,
.ecomm-input input.slds-input:not(:disabled):not([readonly="true"]):hover {
    border-color: var(--ecomm-input-color-border-hover, #238963);
    box-shadow: var(--ecomm-input-box-shadow-hover);
}

/* Input Error Hover */
lightning-input.slds-has-error input.slds-input:not(:disabled):not([readonly]):hover,
.ecomm-input.slds-has-error input.slds-input:not(:disabled):not([readonly="true"]):hover {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-hover);
}

/* Input Focus,Active */
lightning-input input.slds-input:not(:disabled):not([readonly]):focus,
lightning-input input.slds-input:not(:disabled):not([readonly]):active,
.ecomm-input input.slds-input:not(:disabled):not([readonly="true"]):focus,
.ecomm-input input.slds-input:not(:disabled):not([readonly="true"]):active {
    /* Setting in 'Experience Builder' */
    /* background-color: var(--dxp-s-form-element-color-background-active, #FFFFFF); */ /* Colors -> Advanced -> Forms -> Field Background Focus */
    /* border-color: var(--dxp-s-form-element-color-border-focus, #0F588A); */          /* Colors -> Advanced -> Forms -> Field Border Focus */

    border-color: var(--ecomm-input-color-border-focus, #238963);
    box-shadow: var(--ecomm-input-box-shadow-focus);
}

/* Input Error Focus,Active */
lightning-input.slds-has-error input.slds-input:not(:disabled):not([readonly]):focus,
lightning-input.slds-has-error input.slds-input:not(:disabled):not([readonly]):active,
.ecomm-input.slds-has-error input.slds-input:not(:disabled):not([readonly="true"]):focus,
.ecomm-input.slds-has-error input.slds-input:not(:disabled):not([readonly="true"]):active {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-focus);
}

/* Input Readonly Focus,Active */
lightning-input input.slds-input[readonly]:focus,
lightning-input input.slds-input[readonly]:active,
.ecomm-input input.slds-input[readonly="true"]:focus,
.ecomm-input input.slds-input[readonly="true"]:active {
    box-shadow: unset;
}

/* Input Disabled */
lightning-input input.slds-input:disabled,
.ecomm-input input.slds-input:disabled {
    color: var(--ecomm-input-color-text-disabled, #6D6D6D);
    border-color: var(--ecomm-input-color-border-disabled, #CBD6DF) ;
    background-color: var(--ecomm-input-color-background-disabled, #E1E1E1);
    box-shadow: unset;
}

/* Input Error Disabled */
lightning-input.slds-has-error input.slds-input:disabled,
.ecomm-input.slds-has-error input.slds-input:disabled {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    background-color: var(--ecomm-input-color-background-disabled, #E1E1E1);
    box-shadow: var(--ecomm-input-box-shadow-error);
}

/* Input Readonly Disabled */
lightning-input input.slds-input:disabled[readonly],
.ecomm-input input.slds-input:disabled[readonly="true"] {
    color: var(--dxp-s-form-element-text-color, #1D1D1E);
    border-color: transparent;
    background-color: var(--ecomm-color-white, #FFFFFF);
    box-shadow: unset;
    cursor: default;
}

/* Input Placeholder Disabled */
lightning-input input.slds-input:disabled::placeholder,
lightning-input input.slds-input:disabled::-webkit-input-placeholder,
.ecomm-input input.slds-input:disabled::placeholder,
.ecomm-input input.slds-input:disabled::-webkit-input-placeholder {
    /* color: var(--ecomm-input-color-text-disabled, #6D6D6D); */
}

/* Input Helptext */
lightning-input .slds-form-element__help,
.ecomm-input .slds-form-element__help {
    /* Setting in 'Experience Builder' */
    /* font-family: var(--dxp-s-form-element-caption-text-font-family, 'Inter'); */    /* Forms -> Caption Text -> Font Family */
    /* font-size: var(--dxp-s-form-element-caption-text-font-size, 0.875rem); */       /* Forms -> Caption Text -> Font Size */
    /* font-style: var(--dxp-s-form-element-caption-text-font-style, normal); */       /* Forms -> Caption Text -> Font Style */
    /* font-weight: var(--dxp-s-form-element-caption-text-font-weight, 400); */        /* Forms -> Caption Text -> Font Weight */
    /* text-transform: var(--dxp-s-form-element-caption-text-text-transform, none); */ /* Forms -> Caption Text -> Text Case */
    /* line-height: var(--dxp-s-form-element-caption-text-line-height, 1.125rem); */   /* Forms -> Caption Text -> Line Height */
    /* letter-spacing: var(--dxp-s-form-element-caption-text-letter-spacing, 0); */    /* Forms -> Caption Text -> Character Spacing */

    line-height: 1.125rem;
}

/* Input Helptext Error */
lightning-input.slds-has-error .slds-form-element__help,
.ecomm-input.slds-has-error .slds-form-element__help {
    color: var(--ecomm-input-label-color-error, #A70502);
}





/* 2. LIGHTNING INPUT (SEARCH) */

lightning-input .slds-input-has-icon[type="search"] .slds-input {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
}

lightning-input .slds-input-has-icon[type="search"] .slds-input::placeholder {
    color: var(--ecomm-color-black-90, #3B3F42);
}

/* Input Search Icon */
lightning-input .slds-input-has-icon[type="search"] > lightning-primitive-icon .slds-input__icon {
    display: none;
}

lightning-input .slds-input-has-icon[type="search"] > lightning-primitive-icon::after {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5792 14.9497H15.721L15.4168 14.6564C16.4814 13.418 17.1224 11.8102 17.1224 10.0612C17.1224 6.16124 13.9611 3 10.0612 3C6.16124 3 3 6.16124 3 10.0612C3 13.9611 6.16124 17.1224 10.0612 17.1224C11.8102 17.1224 13.418 16.4814 14.6564 15.4168L14.9497 15.721V16.5792L20.3814 22L22 20.3814L16.5792 14.9497ZM10.0612 14.9497C7.3562 14.9497 5.17267 12.7662 5.17267 10.0612C5.17267 7.3562 7.3562 5.17267 10.0612 5.17267C12.7662 5.17267 14.9497 7.3562 14.9497 10.0612C14.9497 12.7662 12.7662 14.9497 10.0612 14.9497Z' fill='%233B3F42'/%3E%3C/svg%3E%0A");
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.1s;
}

lightning-input .slds-input-has-icon[type="search"] > .slds-input:disabled + lightning-primitive-icon::after {
    opacity: 0.6;
}

/* Input Clear Icon */
lightning-input .slds-input-has-icon[type="search"] .slds-input__icon-group {
    top: 0.75rem;
    right: 0.75rem;
    margin: 0;
    height: auto;
}

lightning-input .slds-input-has-icon[type="search"] .slds-input__icon-group .slds-button_icon {
    top: 0;
    right: 0;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    box-shadow: unset !important;
    border: 0 !important;
}

lightning-input .slds-input-has-icon[type="search"] .slds-input__icon-group .slds-button_icon lightning-primitive-icon {
    display: none;
}

lightning-input .slds-input-has-icon[type="search"] .slds-input__icon-group .slds-button_icon::after {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.34314 6.34332L11.9999 12.0001M11.9999 12.0001L17.6568 17.657M11.9999 12.0001L17.6568 6.34326M11.9999 12.0001L6.34308 17.657' stroke='%233B3F42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.1s;
}

lightning-input .slds-input-has-icon[type="search"] .slds-input:disabled ~ .slds-input__icon-group .slds-input__icon {
    pointer-events: none;
}

lightning-input .slds-input-has-icon[type="search"] .slds-input:disabled ~ .slds-input__icon-group .slds-button_icon::after {
    opacity: 0.6;
}





/* 3. LIGHTNING INPUT (DATE) */

/* Input Label Error */
lightning-input lightning-datepicker.slds-has-error label.slds-form-element__label {
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Input */
lightning-input lightning-datepicker input.slds-input {
    padding-right: 2.75rem;
}

lightning-input lightning-datepicker input.slds-input::placeholder {
    color: var(--sds-c-input-text-color, var(--dxp-s-form-element-text-color, var(--dxp-g-root-contrast)));
}

/* Input Calendar Icon */
lightning-input lightning-datepicker .slds-input-has-icon .slds-input__icon {
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    pointer-events: none;
}

lightning-input lightning-datepicker .slds-input-has-icon .slds-input__icon::after {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3V3.5H19.5H20.5C21.3239 3.5 22 4.17614 22 5V21C22 21.8239 21.3239 22.5 20.5 22.5H4.5C3.67614 22.5 3 21.8239 3 21V5C3 4.17614 3.67614 3.5 4.5 3.5H5.5H6V3V1.5H7V3V3.5H7.5H17.5H18V3V1.5H19V3ZM20.5 21.5H21V21V10V9.5H20.5H4.5H4V10V21V21.5H4.5H20.5ZM20.5 8.5H21V8V5V4.5H20.5H4.5H4V5V8V8.5H4.5H20.5Z' fill='%236D6D6D' stroke='%236D6D6D'/%3E%3C/svg%3E%0A");
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.1s;
}

lightning-input lightning-datepicker .slds-input-has-icon input.slds-input:disabled + .slds-input__icon::after,
lightning-input lightning-datepicker .slds-input-has-icon input.slds-input[readonly] + .slds-input__icon::after {
    opacity: 0.6;
}

lightning-input lightning-datepicker .slds-input-has-icon .slds-input__icon button.slds-button_icon {
    display: none;
}

/* Input Error */
lightning-input lightning-datepicker.slds-has-error input.slds-input {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error);
}

/* Input Error Hover */
lightning-input lightning-datepicker.slds-has-error input.slds-input:not(:disabled):not([readonly]):hover {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-hover);
}

/* Input Error Focus,Active */
lightning-input lightning-datepicker.slds-has-error input.slds-input:not(:disabled):not([readonly]):focus,
lightning-input lightning-datepicker.slds-has-error input.slds-input:not(:disabled):not([readonly]):active {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-focus);
}

/* Input Error Disabled */
lightning-input lightning-datepicker.slds-has-error input.slds-input:disabled {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    background-color: var(--ecomm-input-color-background-disabled, #E1E1E1);
    box-shadow: var(--ecomm-input-box-shadow-error);
}

/* Input Helptext Error */
lightning-input lightning-datepicker.slds-has-error .slds-form-element__help {
    color: var(--ecomm-input-label-color-error, #A70502);
}





/* 4. LIGHTNING СOMBOBOX */

/* Сombobox Label */
lightning-combobox label.slds-form-element__label {
    margin-bottom: 0;
    padding-right: 0;
    padding-bottom: 0.25rem;
    transition: color 0.1s;
}

/* Сombobox Label Error */
lightning-combobox.slds-has-error label.slds-form-element__label {
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Сombobox Label Required */
lightning-combobox label.slds-form-element__label .slds-required {
    margin-left: 0;
    margin-right: 0.25rem;
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Сombobox Input */
lightning-combobox button.slds-combobox__input {
    padding-right: 2.5rem;
    line-height: 1.5rem !important;
    transition: color 0.1s, border-color 0.1s, background-color 0.1s, box-shadow 0.1s, outline 0.1s !important;
}

lightning-combobox button.slds-combobox__input span {
    line-height: inherit;
}

/* Сombobox Input Error */
lightning-combobox.slds-has-error button.slds-combobox__input {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error);
}

/* Сombobox Input Placeholder */
lightning-combobox button.slds-combobox__input:not(.slds-combobox__input-value) {
    color: var(--dxp-s-form-element-placeholder-text-color, #706E6B); 
}

/* Сombobox Input Hover */
lightning-combobox button.slds-combobox__input:not(:disabled):hover {
    border-color: var(--ecomm-input-color-border-hover, #238963);
    box-shadow: var(--ecomm-input-box-shadow-hover);
}

/* Сombobox Input Error Hover */
lightning-combobox.slds-has-error button.slds-combobox__input:not(:disabled):hover {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-hover);
}

/* Сombobox Input Focus,Active */
lightning-combobox button.slds-combobox__input:not(:disabled):focus,
lightning-combobox button.slds-combobox__input:not(:disabled):active {
    border-color: var(--ecomm-input-color-border-focus, #238963);
    box-shadow: var(--ecomm-input-box-shadow-focus);
}

/* Сombobox Input Error Focus,Active */
lightning-combobox.slds-has-error button.slds-combobox__input:not(:disabled):focus,
lightning-combobox.slds-has-error button.slds-combobox__input:not(:disabled):active {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-focus);
}

/* Сombobox Input Disabled */
lightning-combobox button.slds-combobox__input:disabled {
    color: var(--ecomm-input-color-text-disabled, #6D6D6D);
    border-color: var(--ecomm-input-color-border-disabled, #CBD6DF) ;
    background-color: var(--ecomm-input-color-background-disabled, #E1E1E1);
    box-shadow: unset;
}

/* Сombobox Icon Arrow-Down */
lightning-combobox .slds-input__icon-group .slds-input__icon {
    display: none;
}

lightning-combobox .slds-input__icon-group {
    margin-top: 0 !important;
    right: 0.75rem;
    top: 0.75rem;
}

lightning-combobox .slds-input__icon-group::before,
lightning-combobox .slds-input__icon-group {
    display: block;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    pointer-events: none;
}

lightning-combobox .slds-input__icon-group::before {
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%233B3F42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    opacity: 1;
    transition: opacity 0.1s;
}

lightning-combobox button.slds-combobox__input:disabled ~ .slds-input__icon-group::before {
    opacity: 0.6;
}

/* Сombobox Helptext */
lightning-combobox .slds-form-element__help {
    line-height: 1.125rem;
}

/* Сombobox Helptext Error */
lightning-combobox.slds-has-error .slds-form-element__help {
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Сombobox Options */
lightning-combobox .slds-listbox .slds-listbox__option {
    line-height: 1.5rem;
}

lightning-combobox .slds-listbox .slds-listbox__option:hover,
lightning-combobox .slds-listbox .slds-listbox__option:focus,
lightning-combobox .slds-listbox .slds-listbox__option.slds-has-focus {
    color: var(--ecomm-color-primary-green, #238963);
    border-color: transparent !important;
    background-color: var(--ecomm-color-white, #FFFFFF);
    box-shadow: unset;
    outline: 0;
}

lightning-combobox .slds-listbox .slds-listbox__option[aria-checked="true"] {
    font-weight: 600;
}

lightning-combobox .slds-listbox .slds-listbox__option .slds-listbox__option-icon {
    margin-right: 0.625rem;
}

lightning-combobox .slds-listbox .slds-listbox__option .slds-icon {
    fill: var(--ecomm-color-primary-green, #238963);
}





/* 5. LIGHTNING TEXTAREA */

/* Textarea Label */
lightning-textarea label.slds-form-element__label,
.ecomm-textarea label.slds-form-element__label {
    margin-bottom: 0;
    padding-right: 0;
    padding-bottom: 0.25rem;
    transition: color 0.1s;
}

/* Textarea Label Error*/
lightning-textarea.slds-has-error label.slds-form-element__label,
.ecomm-textarea.slds-has-error label.slds-form-element__label {
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Textarea Required */
lightning-textarea label.slds-form-element__label .slds-required,
.ecomm-textarea label.slds-form-element__label .slds-required {
    margin-left: 0;
    margin-right: 0.25rem;
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Textarea */
lightning-textarea textarea.slds-textarea,
.ecomm-textarea textarea.slds-textarea {
    min-height: 4.5rem;
    padding-top: var(--dxp-s-form-element-spacing-block-start, 11px);
    padding-bottom: var(--dxp-s-form-element-spacing-block-end, 11px);
    line-height: 1.5rem;
    transition: color 0.1s, border-color 0.1s, background-color 0.1s, box-shadow 0.1s, outline 0.1s !important;
}

/* Textarea Readonly */
lightning-textarea textarea.slds-textarea[readonly],
.ecomm-textarea textarea.slds-textarea[readonly="true"] {
    color: var(--dxp-s-form-element-text-color, #1D1D1E);
    border-color: var(--dxp-s-form-element-color-border, #CBD6DF);
    background-color: var(--ecomm-color-white, #FFFFFF);
    box-shadow: unset;
    cursor: default;
}

/* Textarea Error */
lightning-textarea.slds-has-error textarea.slds-textarea,
.ecomm-textarea.slds-has-error textarea.slds-textarea {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error);
}

/* Textarea Placeholder */
lightning-textarea textarea.slds-textarea::placeholder,
lightning-textarea textarea.slds-textarea::-webkit-input-placeholder,
.ecomm-textarea textarea.slds-textarea::placeholder,
.ecomm-textarea textarea.slds-textarea::-webkit-input-placeholder {}

/* Textarea Hover */
lightning-textarea textarea.slds-textarea:not(:disabled):not([readonly]):hover,
.ecomm-textarea textarea.slds-textarea:not(:disabled):not([readonly="true"]):hover {
    border-color: var(--ecomm-input-color-border-hover, #238963);
    box-shadow: var(--ecomm-input-box-shadow-hover);
}

/* Textarea Error Hover */
lightning-textarea.slds-has-error textarea.slds-textarea:not(:disabled):not([readonly]):hover,
.ecomm-textarea.slds-has-error textarea.slds-textarea:not(:disabled):not([readonly="true"]):hover {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-hover);
}

/* Textarea Focus,Active */
lightning-textarea textarea.slds-textarea:not(:disabled):not([readonly]):focus,
lightning-textarea textarea.slds-textarea:not(:disabled):not([readonly]):active,
.ecomm-textarea textarea.slds-textarea:not(:disabled):not([readonly="true"]):focus,
.ecomm-textarea textarea.slds-textarea:not(:disabled):not([readonly="true"]):active {
    border-color: var(--ecomm-input-color-border-focus, #238963);
    box-shadow: var(--ecomm-input-box-shadow-focus);
}

/* Textarea Error Focus,Active */
lightning-textarea.slds-has-error textarea.slds-textarea:not(:disabled):not([readonly]):focus,
lightning-textarea.slds-has-error textarea.slds-textarea:not(:disabled):not([readonly]):active,
.ecomm-textarea.slds-has-error textarea.slds-textarea:not(:disabled):not([readonly="true"]):focus,
.ecomm-textarea.slds-has-error textarea.slds-textarea:not(:disabled):not([readonly="true"]):active {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-focus);
}

/* Textarea Readonly Focus,Active */
lightning-textarea textarea.slds-textarea[readonly]:focus,
lightning-textarea textarea.slds-textarea[readonly]:active,
.ecomm-textarea textarea.slds-textarea[readonly="true"]:focus,
.ecomm-textarea textarea.slds-textarea[readonly="true"]:active {
    border-color: var(--dxp-s-form-element-color-border, #CBD6DF);
    box-shadow: unset;
}

/* Textarea Disabled */
lightning-textarea textarea.slds-textarea:disabled,
.ecomm-textarea textarea.slds-textarea:disabled {
    color: var(--ecomm-input-color-text-disabled, #6D6D6D);
    border-color: var(--ecomm-input-color-border-disabled, #CBD6DF) ;
    background-color: var(--ecomm-input-color-background-disabled, #E1E1E1);
    box-shadow: unset;
}

/* Textarea Error Disabled */
lightning-textarea.slds-has-error textarea.slds-textarea:disabled,
.ecomm-textarea.slds-has-error textarea.slds-textarea:disabled {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    background-color: var(--ecomm-input-color-background-disabled, #E1E1E1);
    box-shadow: var(--ecomm-input-box-shadow-error);
}

/* Textarea Readonly Disabled */
lightning-textarea textarea.slds-textarea[readonly]:disabled,
.ecomm-textarea textarea.slds-textarea[readonly="true"]:disabled {
    color: var(--dxp-s-form-element-text-color, #1D1D1E);
    border-color: var(--dxp-s-form-element-color-border, #CBD6DF);
    background-color: var(--ecomm-color-white, #FFFFFF);
    box-shadow: unset;
    cursor: default;
}

/* Textarea Placeholder Disabled */
lightning-textarea textarea.slds-textarea:disabled::placeholder,
lightning-textarea textarea.slds-textarea:disabled::-webkit-input-placeholder,
.ecomm-textarea textarea.slds-textarea:disabled::placeholder,
.ecomm-textarea textarea.slds-textarea:disabled::-webkit-input-placeholder {
    /* color: var(--ecomm-input-color-text-disabled, #6D6D6D); */
}

/* Textarea Helptext */
lightning-textarea .slds-form-element__help,
.ecomm-textarea .slds-form-element__help {
    line-height: 1.125rem;
}

/* Textarea Helptext Error */
lightning-textarea.slds-has-error .slds-form-element__help,
.ecomm-textarea.slds-has-error .slds-form-element__help {
    color: var(--ecomm-input-label-color-error, #A70502);
}





/* 6. LIGHTNING INPUT ADDRESS */

.ecomm-addresses-form__wrapper lightning-input-address .slds-form-element__row {
    display: none !important;
}

lightning-input-address .slds-form-element__row.slds-grow {
    display: flex !important;
    margin-bottom: 0 !important;
}

lightning-input-address .slds-form-element__row:not(:last-child) {
    margin-bottom: 1rem !important;
}

lightning-input-address legend.slds-form-element__label {
    margin-bottom: 0 !important;
}

.ecomm-addresses-form__wrapper lightning-input-address legend.slds-form-element__label {
    display: none !important;
}

.ecomm-addresses-form__wrapper lightning-input-address lightning-lookup-address .slds-form-element__label {
    display: none !important;
}

/* Input */
lightning-input-address lightning-lookup-address input.slds-combobox__input {
    padding-left: 2.75rem;
    line-height: 1.5rem;
    transition: color 0.1s, border-color 0.1s, backgrouund-color 0.1s, box-shadow 0.1s, outline 0.1s;
}

/* Input Placeholder */
lightning-input-address lightning-lookup-address input.slds-combobox__input::placeholder,
lightning-input-address lightning-lookup-address input.slds-combobox__input::-webkit-input-placeholder {
/* color: var(--dxp-s-form-element-placeholder-text-color, #706E6B); */
}

/* Input Placeholder Disabled */
lightning-input-address lightning-lookup-address input.slds-combobox__input:disabled::placeholder,
lightning-input-address lightning-lookup-address input.slds-combobox__input:disabled::-webkit-input-placeholder {
    /* color: var(--ecomm-input-color-text-disabled, #6D6D6D); */
}

/* Input Hover */
lightning-input-address lightning-lookup-address input.slds-combobox__input:not(:disabled):hover {
    border-color: var(--ecomm-input-color-border-hover, #238963);
    box-shadow: var(--ecomm-input-box-shadow-hover);
}

/* Input Focus,Active */
lightning-input-address lightning-lookup-address input.slds-combobox__input:not(:disabled):focus,
lightning-input-address lightning-lookup-address input.slds-combobox__input:not(:disabled):active {
    border-color: var(--ecomm-input-color-border-focus, #238963);
    box-shadow: var(--ecomm-input-box-shadow-focus);
}

/* Input Disabled */
lightning-input-address lightning-lookup-address input.slds-combobox__input:disabled {
    color: var(--ecomm-input-color-text-disabled, #6D6D6D);
    border-color: var(--ecomm-input-color-border-disabled, #CBD6DF) ;
    background-color: var(--ecomm-input-color-background-disabled, #E1E1E1);
    box-shadow: unset;
}

/* Input Icon Search */
lightning-input-address lightning-lookup-address .slds-input__icon-group {
    right: unset;
    left: 0.75rem;
    top: 0.75rem;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    pointer-events: none;
}

lightning-input-address lightning-lookup-address .slds-input__icon-group::after {
    display: block;
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5792 14.9497H15.721L15.4168 14.6564C16.4814 13.418 17.1224 11.8102 17.1224 10.0612C17.1224 6.16124 13.9611 3 10.0612 3C6.16124 3 3 6.16124 3 10.0612C3 13.9611 6.16124 17.1224 10.0612 17.1224C11.8102 17.1224 13.418 16.4814 14.6564 15.4168L14.9497 15.721V16.5792L20.3814 22L22 20.3814L16.5792 14.9497ZM10.0612 14.9497C7.3562 14.9497 5.17267 12.7662 5.17267 10.0612C5.17267 7.3562 7.3562 5.17267 10.0612 5.17267C12.7662 5.17267 14.9497 7.3562 14.9497 10.0612C14.9497 12.7662 12.7662 14.9497 10.0612 14.9497Z' fill='%233B3F42'/%3E%3C/svg%3E%0A");
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 1;
    transform: opacity 0.1s;
}

lightning-input-address lightning-lookup-address:has(input.slds-combobox__input:disabled) .slds-input__icon-group::after {
    opacity: 0.6;
}

lightning-input-address lightning-lookup-address .slds-input__icon {
    display: none;
}

/* Input Options */
lightning-input-address lightning-lookup-address .slds-listbox > div:last-child {
    display: none;
}

lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option:hover
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option:focus
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option.slds-has-focus,
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option.slds-has-focus:hover,
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option.slds-has-focus:focus,
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option[aria-selected="true"],
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option[aria-selected="true"]:hover,
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option[aria-selected="true"]:focus,
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option[aria-selected="true"].slds-has-focus,
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option[aria-selected="true"].slds-has-focus:hover,
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option[aria-selected="true"].slds-has-focus:focus {
    color: var(--ecomm-color-primary-green, #238963);
    border-color: transparent !important;
    background-color: var(--ecomm-color-background, #F6F8F9);
    box-shadow: unset;
    outline: 0;
}

lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option-icon {
    display: none;
}

lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option-text_entity,
lightning-input-address lightning-lookup-address .slds-listbox .slds-listbox__option-meta_entity {
    margin-bottom: 0;
    line-height: 1.5rem;
    color: inherit !important;
}





/* 7. LIGHTNING CHECKBOX, LIGHTNING CHECKBOX GROUP */

/* Checkbox Required */
lightning-input .slds-checkbox .slds-required {
    display: none;
}

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

/* Checkbox Wrapper */
lightning-checkbox-group .slds-form-element__label {
    margin-bottom: 0.75rem;
    padding-right: 0;
}

/* Checkbox Group Required */
lightning-checkbox-group .slds-form-element__label .slds-required {
    margin-left: 0;
    margin-right: 0.25rem;
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Checkbox Group Items */
lightning-checkbox-group .slds-checkbox + .slds-checkbox {
    margin-top: 0.5rem;
}

/* Checkbox Faux */
lightning-input .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-input-color-border-hover, #238963);
    cursor: pointer;
    transition: border-color 0.1s, background-color 0.1s, box-shadow 0.1s;
}

/* Checkbox Faux Error */
lightning-input.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-input-color-border-error, #A70502);
}

/* Checkbox label */
lightning-input .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 {
    padding-left: 0.75rem;
    padding-right: 0;
    font-size: 1rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition: color 0.1s;
}

/* Checkbox Faux Checked */
lightning-input .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-input-color-border-hover, #238963);
    background-color: var(--ecomm-input-color-border-hover, #238963);
}

/* Checkbox Faux Checked Error */
lightning-input.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-input-color-border-error, #A70502);
    background-color: var(--ecomm-input-color-border-error, #A70502);
}

/* Checkbox Faux Icon */
lightning-input .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: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10L9 14.5L16 5" stroke="white" stroke-width="2" stroke-linecap="round"/></svg>');
    display: block;
    position: relative;
    left: -0.125rem;
    top: -0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    transform: unset;
}

/* Checkbox Faux Hover,Focus,Active */
lightning-input .slds-checkbox [type="checkbox"]:not(:disabled):hover + .slds-checkbox__label .slds-checkbox_faux,
lightning-input .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,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:not(:disabled):hover + .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-checkbox-color-border-hover, #666666);
    box-shadow: var(--ecomm-input-box-shadow-hover);
}

/* Checkbox Faux Checked Hover,Focus,Active */
lightning-input .slds-checkbox [type="checkbox"]:checked:not(:disabled):hover + .slds-checkbox__label .slds-checkbox_faux,
lightning-input .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,
lightning-checkbox-group .slds-checkbox [type="checkbox"]:checked:not(:disabled):hover + .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-checkbox-color-border-hover, #666666);
    background-color: var(--ecomm-checkbox-color-border-hover, #666666);
    box-shadow: var(--ecomm-input-box-shadow-hover);
}

/* Checkbox Faux Disabled */
lightning-input .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-input-color-border-disabled, #CBD6DF);
    background-color: var(--ecomm-checkbox-color-background-disabled, #FFFFFF);
    cursor: not-allowed;
}

/* Checkbox Faux Disabled Error */
lightning-input.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-input-color-border-error, #A70502);
}

/* Checkbox Faux Checked Disabled */
lightning-input .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 {
    background-color: var(--ecomm-input-color-border-disabled, #CBD6DF);
}

/* Checkbox Label Disabled */
lightning-input .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-checkbox-color-text-disabled, #9E9E9E);
    cursor: not-allowed;
}

/* Checkbox Helptext */
lightning-input lightning-primitive-input-checkbox .slds-form-element__help,
lightning-checkbox-group .slds-form-element__help {
    font-size: 0.875rem;
    line-height: 1.125rem;
    color: var(--ecomm-input-label-color-error, #A70502);
}

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





/* 8. LIGHTNING RADIO GROUP */

/* Radio Wrapper */
lightning-radio-group .slds-form-element__label {
    margin-bottom: 0.75rem;
    padding-right: 0;
}

/* Radio Required */
lightning-radio-group .slds-form-element__label .slds-required {
    margin-left: 0;
    margin-right: 0.25rem;
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Radio Items */
lightning-radio-group .slds-radio + .slds-radio,
.ecomm-radio-group .slds-radio + .slds-radio {
    margin-top: 0.5rem;
}

/* Radio Faux */
lightning-radio-group .slds-radio [type="radio"] + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"] + .slds-radio__label .slds-radio_faux {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem;
    margin-right: 0 !important;
    border-color: var(--ecomm-input-color-border-hover, #238963);
    border-width: 2px;
    cursor: pointer;
    transition: border-color 0.1s, background-color 0.1s, box-shadow 0.1s;
}

/* Radio Faux Error */
lightning-radio-group.slds-has-error .slds-radio [type="radio"] + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group.slds-has-error .slds-radio [type="radio"] + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-input-color-border-error, #A70502);
}

/* Radio label */
lightning-radio-group .slds-radio [type="radio"] + .slds-radio__label .slds-form-element__label,
.ecomm-radio-group .slds-radio [type="radio"] + .slds-radio__label .slds-form-element__label {
    padding-left: 0.75rem;
    padding-right: 0;
    font-size: 1rem;
    line-height: 1.25rem;
    cursor: pointer;
    transition: color 0.1s;
}

/* Radio Faux Checked */
lightning-radio-group .slds-radio [type="radio"]:not(:disabled):checked + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:not(:disabled):checked + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-input-color-border-hover, #238963);
    background-color: var(--ecomm-input-color-border-hover, #238963);
}

lightning-radio-group .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux::after,
.ecomm-radio-group .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux::after {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--ecomm-color-white, #FFFFFF);
}

/* Radio Faux Checked Error */
lightning-radio-group.slds-has-error .slds-radio [type="radio"]:not(:disabled):checked + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group.slds-has-error .slds-radio [type="radio"]:not(:disabled):checked + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    background-color: var(--ecomm-input-color-border-error, #A70502);
}

/* Radio Faux Hover,Focus,Active */
lightning-radio-group .slds-radio [type="radio"]:not(:disabled):hover + .slds-radio__label .slds-radio_faux,
lightning-radio-group .slds-radio [type="radio"]:not(:disabled):focus + .slds-radio__label .slds-radio_faux,
lightning-radio-group .slds-radio [type="radio"]:not(:disabled):active + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:not(:disabled):hover + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:not(:disabled):focus + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:not(:disabled):active + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-checkbox-color-border-hover, #666666);
    box-shadow: var(--ecomm-input-box-shadow-hover);
}

/* Radio Faux Checked Hover,Focus,Active */
lightning-radio-group .slds-radio [type="radio"]:checked:not(:disabled):hover + .slds-radio__label .slds-radio_faux,
lightning-radio-group .slds-radio [type="radio"]:checked:not(:disabled):focus + .slds-radio__label .slds-radio_faux,
lightning-radio-group .slds-radio [type="radio"]:checked:not(:disabled):active + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:checked:not(:disabled):hover + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:checked:not(:disabled):focus + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:checked:not(:disabled):active + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-checkbox-color-border-hover, #666666);
    background-color: var(--ecomm-checkbox-color-border-hover, #666666);
    box-shadow: var(--ecomm-input-box-shadow-hover);
}

/* Radio Faux Disabled */
lightning-radio-group .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-input-color-border-disabled, #CBD6DF);
    background-color: var(--ecomm-checkbox-color-background-disabled, #FFFFFF);
    cursor: not-allowed;
}

/* Radio Faux Disabled Error */
lightning-radio-group.slds-has-error .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group.slds-has-error .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-input-color-border-error, #A70502);
}

/* Radio Faux Checked Disabled */
lightning-radio-group .slds-radio [type="radio"]:checked:disabled + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:checked:disabled + .slds-radio__label .slds-radio_faux {
    background-color: var(--ecomm-input-color-border-disabled, #CBD6DF);
}

/* Radio Label Disabled */
lightning-radio-group .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-form-element__label,
.ecomm-radio-group .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-form-element__label {
    color: var(--ecomm-checkbox-color-text-disabled, #9E9E9E);
    cursor: not-allowed;
}





/* 9. LIGHTNING SELECT */

/* Select Label */
lightning-select label.slds-form-element__label,
.ecomm-select label.slds-form-element__label {
    margin-bottom: 0;
    padding-right: 0;
    padding-bottom: 0.25rem;
    transition: color 0.1s;
}

/* Select Label Error */
lightning-select.slds-has-error label.slds-form-element__label,
.ecomm-select.slds-has-error label.slds-form-element__label {
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Select Required */
lightning-select label.slds-form-element__label .slds-required,
.ecomm-select label.slds-form-element__label .slds-required {
    margin-left: 0;
    margin-right: 0.25rem;
    color: var(--ecomm-input-label-color-error, #A70502);
}

/* Hide standart Arrows */
lightning-select[multiple] .slds-select_container::before,
lightning-select .slds-select_container::after,
.ecomm-select .slds-select_container::before,
.ecomm-select .slds-select_container::after {
    display: none;
}

/* Select Icon Arrow-Down */
lightning-select:not([multiple]) .slds-select_container::before,
.ecomm-select .slds-select_container::before {
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%233B3F42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    display: block;
    right: 2.25rem;
    top: 0.75rem;
    border: 0;
    opacity: 1;
    transition: opacity 0.1s;
}

/* Select */
lightning-select .slds-select_container select.slds-select,
.ecomm-select .slds-select_container select.slds-select {
    padding-top: var(--dxp-s-form-element-spacing-block-start, 11px);
    padding-left: 0.75rem;
    padding-bottom: var(--dxp-s-form-element-spacing-block-end, 11px);
    padding-right: 2.75rem;
    line-height: 1.5rem;
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s, background-color 0.1s, box-shadow 0.1s, outline 0.1s !important;
}

lightning-select .slds-select_container select.slds-select:not([multiple]),
.ecomm-select .slds-select_container select.slds-select:not([multiple]) {
    height: calc(1.5rem + var(--dxp-s-form-element-spacing-block-start, 11px) + var(--dxp-s-form-element-spacing-block-end, 11px) + (1px * 2));
}

/* Select Placeholder */
lightning-select .slds-select_container select.slds-select::placeholder,
lightning-select .slds-select_container select.slds-select::-webkit-input-placeholder,
.ecomm-select .slds-select_container select.slds-select::placeholder,
.ecomm-select .slds-select_container select.slds-select::-webkit-input-placeholder {
    /* color: var(--dxp-s-form-element-placeholder-text-color, #706E6B); */
}

/* Select Error */
lightning-select.slds-has-error .slds-select_container select.slds-select,
.ecomm-select.slds-has-error .slds-select_container select.slds-select {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error);
}

/* Select Hover */
lightning-select .slds-select_container select.slds-select:not(:disabled):hover,
.ecomm-select .slds-select_container select.slds-select:not(:disabled):hover {
    border-color: var(--ecomm-input-color-border-hover, #238963);
    box-shadow: var(--ecomm-input-box-shadow-hover);
}

/* Select Error Hover */
lightning-select.slds-has-error .slds-select_container select.slds-select:not(:disabled):hover,
.ecomm-select.slds-has-error .slds-select_container select.slds-select:not(:disabled):hover {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-hover);
}

/* Select Focus,Active */
lightning-select .slds-select_container select.slds-select:not(:disabled):focus,
lightning-select .slds-select_container select.slds-select:not(:disabled):active,
.ecomm-select .slds-select_container select.slds-select:not(:disabled):focus,
.ecomm-select .slds-select_container select.slds-select:not(:disabled):active {
    border-color: var(--ecomm-input-color-border-focus, #238963);
    box-shadow: var(--ecomm-input-box-shadow-focus);
}

/* Select Error Focus,Active */
lightning-select.slds-has-error .slds-select_container select.slds-select:not(:disabled):focus,
lightning-select.slds-has-error .slds-select_container select.slds-select:not(:disabled):active,
.ecomm-select.slds-has-error .slds-select_container select.slds-select:not(:disabled):focus,
.ecomm-select.slds-has-error .slds-select_container select.slds-select:not(:disabled):active {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    box-shadow: var(--ecomm-input-box-shadow-error-focus);
}

/* Select Disabled */
lightning-select .slds-select_container select.slds-select:disabled,
.ecomm-select .slds-select_container select.slds-select:disabled {
    color: var(--ecomm-input-color-text-disabled, #6D6D6D);
    border-color: var(--ecomm-input-color-border-disabled, #CBD6DF) ;
    background-color: var(--ecomm-input-color-background-disabled, #E1E1E1);
    box-shadow: unset;
    cursor: not-allowed;
}

/* Select Error Disabled */
lightning-select.slds-has-error .slds-select_container select.slds-select:disabled,
.ecomm-select.slds-has-error .slds-select_container select.slds-select:disabled {
    border-color: var(--ecomm-input-color-border-error, #A70502);
    background-color: var(--ecomm-input-color-background-disabled, #E1E1E1);
    box-shadow: var(--ecomm-input-box-shadow-error);
}

/* Select Icon Arrow-Down Disabled */
lightning-select:not([multiple]):has(select.slds-select:disabled) .slds-select_container::before,
.ecomm-select:has(select.slds-select:disabled) .slds-select_container::before {
    opacity: 0.6;
}

/* Select Helptext */
lightning-select .slds-form-element__help,
.ecomm-select .slds-form-element__help {
    line-height: 1.125rem;
}

/* Select Helptext Error */
lightning-select.slds-has-error .slds-form-element__help,
.ecomm-select.slds-has-error .slds-form-element__help {
    color: var(--ecomm-input-label-color-error, #A70502);
}





/* 10. LIGHTNING TABSET */

lightning-tabset .slds-tabs_default__nav,
.ecomm-tabset .slds-tabs_default__nav {
    border-bottom-color: var(--ecomm-color-background-blue, #E0E7EA);
}

lightning-tabset .slds-tabs_default__item,
.ecomm-tabset .slds-tabs_default__item {
    padding-left: 1rem;
    padding-right: 1rem;
    cursor: pointer;
}

lightning-tabset .slds-tabs_default__item::after,
.ecomm-tabset .slds-tabs_default__item::after {
    background-color: transparent;
    transition: background-color 0.1s;
}

/* Hide empty space for the "More" button */
lightning-tabset .slds-tabs_default__item[style="visibility: hidden;"],
.ecomm-tabset .slds-tabs_default__item[style="visibility: hidden;"] {
    display: none;
}

lightning-tabset .slds-tabs_default__link,
.ecomm-tabset .slds-tabs_default__link {
    font-size: 1.125rem;
    font-weight: 400;
    text-decoration: none !important;
    color: var(--ecomm-color-black, #1D1D1E) !important;
}

lightning-tabset .slds-is-active .slds-tabs_default__link,
.ecomm-tabset .slds-is-active .slds-tabs_default__link {
    font-weight: 600 !important;
    color: var(--ecomm-color-black, #1D1D1E) !important;
}

lightning-tabset .slds-tabs_default__item.slds-is-active::after,
lightning-tabset .slds-tabs_default__item.slds-is-active.slds-has-focus::after,
lightning-tabset .slds-tabs_default__item.slds-is-active:hover::after,
lightning-tabset .slds-tabs_default__item.slds-is-active:focus::after,
.ecomm-tabset .slds-tabs_default__item.slds-is-active::after,
.ecomm-tabset .slds-tabs_default__item.slds-is-active.slds-has-focus::after,
.ecomm-tabset .slds-tabs_default__item.slds-is-active:hover::after,
.ecomm-tabset .slds-tabs_default__item.slds-is-active:focus::after {
    height: 2px !important;
    background-color: var(--ecomm-color-primary-green, #238963) !important;
}

lightning-tabset .slds-tabs_default__item.slds-is-active,
lightning-tabset .slds-tabs_default__item.slds-is-active a,
.ecomm-tabset .slds-tabs_default__item.slds-is-active,
.ecomm-tabset .slds-tabs_default__item.slds-is-active a {
    cursor: default !important;
}

lightning-tabset .slds-tabs_default__item.slds-has-focus::after,
lightning-tabset .slds-tabs_default__item:hover::after,
lightning-tabset .slds-tabs_default__item:focus::after,
.ecomm-tabset .slds-tabs_default__item.slds-has-focus::after,
.ecomm-tabset .slds-tabs_default__item:hover::after,
.ecomm-tabset .slds-tabs_default__item:focus::after {
    height: 1px !important;
    background-color: var(--ecomm-color-primary-green, #238963) !important;
}

lightning-tabset .slds-tabs_default__content,
.ecomm-tabset .slds-tabs_default__content {
    position: relative;
    padding: 1.5rem 0 0 0 !important;
    font-weight: 400;
}





/* 11. QUANTITY SELECTOR */

commerce-quantity-selector commerce-number-input:hover button.slds-button.slds-button_neutral.number-input__decrement-button,
commerce-quantity-selector commerce-number-input:hover button.slds-button.slds-button_neutral.number-input__decrement-button:not(:disabled),
commerce-quantity-selector commerce-number-input:hover input.slds-input.number-input__input,
commerce-quantity-selector commerce-number-input:hover input.slds-input.number-input__input:not(:disabled),
commerce-quantity-selector commerce-number-input:hover button.slds-button.slds-button_neutral.number-input__increment-button,
commerce-quantity-selector commerce-number-input:hover button.slds-button.slds-button_neutral.number-input__increment-button:not(:disabled) {
    border-color: var(--ecomm-input-color-border-hover, #238963);
    background-color: var(--ecomm-color-white, #FFFFFF);
}

commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__decrement-button,
commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__decrement-button:disabled,
commerce-quantity-selector input.slds-input.number-input__input,
commerce-quantity-selector input.slds-input.number-input__input:disabled,
commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__increment-button,
commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__increment-button:disabled {
    border-color: var(--ecomm-color-border-disabled, #CBD6DF);
}

commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__decrement-button:disabled,
commerce-quantity-selector input.slds-input.number-input__input:disabled,
commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__increment-button:disabled {
    border-color: var(--ecomm-color-border-disabled, #CBD6DF) !important;
    background-color: var(--ecomm-input-color-background-disabled) !important;
}

commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__decrement-button svg,
commerce-quantity-selector input.slds-input.number-input__input,
commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__increment-button svg {
    fill: var(--ecomm-color-black, #231f20) !important;
    color: var(--ecomm-color-black, #231f20) !important;

}

commerce-quantity-selector input.slds-input.number-input__input {
    width: 3.25rem !important;
    padding: 0 !important;
}

commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__decrement-button:disabled svg,
commerce-quantity-selector button.slds-button.slds-button_neutral.number-input__increment-button:disabled svg {
    fill: var(--ecomm-color-disabled, #9E9E9E) !important;
}

commerce-quantity-selector span[role="group"] {
    height: 3rem;
}

commerce-quantity-selector button.number-input__decrement-button,
commerce-quantity-selector button.number-input__increment-button {
    width: 3rem;
    padding: 0 !important;
}

commerce-quantity-selector button.number-input__decrement-button {
    border-top-left-radius: 0.25rem !important;
    border-bottom-left-radius: 0.25rem !important;
}

commerce-quantity-selector button.number-input__increment-button {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
}

/* GLOBAL FORM VARIABLES */

:root {
    --ecomm-new-color-black-01: var(--ecomm-color-black);
    --ecomm-new-color-black-04: var(--ecomm-new-color-black-01);
    --ecomm-new-color-error-01: var(--ecomm-input-label-color-error);
    --ecomm-new-color-required-01: var(--ecomm-input-label-color-error);
    --ecomm-new-color-primary-01: var(--mimit-color-green);
    --ecomm-new-color-box-shadow-01: var(--ecomm-color-box-shadow);
    --ecomm-new-color-white-04: var(--ecomm-input-color-background-disabled);
}

/* GROUP LABEL */

:root {
    --ecomm-new-form-group-label-margin: 0 0 0.75rem 0;
    --ecomm-new-form-group-label-padding: 0;
    --ecomm-new-form-group-label-color: var(--ecomm-new-color-form-field-label);
    --ecomm-new-form-group-label-disabled-color: var(--ecomm-color-black);
    --ecomm-new-form-group-label-error-color: var(--ecomm-new-color-error-01);
}

/* GROUP LABEL REQUIRED */

:root {
    --ecomm-new-form-group-label-required-margin: 0 0.25rem 0 0;
    --ecomm-new-form-group-label-required-color: var(--ecomm-new-color-required-01);
}

/* LABEL */

:root {
    --ecomm-new-form-label-margin: 0;
    --ecomm-new-form-label-padding: 0 0 0.25rem 0;
    --ecomm-new-form-label-line-height: 1.25rem;
    --ecomm-new-form-label-color: var(--ecomm-new-color-form-field-label);
    --ecomm-new-form-label-disabled-color: var(--ecomm-color-black);
    --ecomm-new-form-label-error-color: var(--ecomm-new-color-error-01);
}

/* LABEL REQUIRED */

:root {
    --ecomm-new-form-label-required-content: '*';
    --ecomm-new-form-label-required-margin: 0 0.25rem 0 0;
    --ecomm-new-form-label-required-color: var(--ecomm-new-color-required-01);
}

/* ELEMENT */

:root {
    --ecomm-new-form-element-line-height: 1.5rem;
    --ecomm-new-form-element-outline-width: 0.125rem;
    --ecomm-new-form-element-outline-style: solid;
    --ecomm-new-form-element-outline-color: transparent;
    --ecomm-new-form-element-outline-offset: -0.125rem;

    /* READONLY */

    --ecomm-new-form-element-readonly-font-size: var(--ecomm-new-form-input-text-font-size);
    --ecomm-new-form-element-readonly-border-color: var(--ecomm-new-color-form-field-border);
    --ecomm-new-form-element-readonly-background-color: var(--ecomm-new-color-form-field-background-fill);

    /* ERROR */

    --ecomm-new-form-element-error-border-color: var(--ecomm-new-color-error-01);
    --ecomm-new-form-element-error-outline-color: var(--ecomm-new-color-error-01);

    /* HOVER */

    --ecomm-new-form-element-border-color-hover: var(--ecomm-new-color-primary-01);
    --ecomm-new-form-element-box-shadow-hover:
        -2px -2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        2px -2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        2px 2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        -2px 2px 0px 0px var(--ecomm-new-color-box-shadow-01);

    /* ERROR HOVER */

    --ecomm-new-form-element-error-border-color-hover: var(--ecomm-new-color-error-01);
    --ecomm-new-form-element-error-outline-color-hover: var(--ecomm-new-color-error-01);
    --ecomm-new-form-element-error-box-shadow-hover:
        -2px -2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        2px -2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        2px 2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        -2px 2px 0px 0px var(--ecomm-new-color-box-shadow-01);

    /* FOCUS */

    --ecomm-new-form-element-outline-color-focus: var(--ecomm-new-color-form-field-border-focus);
    --ecomm-new-form-element-box-shadow-focus:
        -2px -2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        2px -2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        2px 2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        -2px 2px 0px 0px var(--ecomm-new-color-box-shadow-01);

    /* ERROR FOCUS */

    --ecomm-new-form-element-error-color-focus: var(--ecomm-new-color-form-input-text-focus);
    --ecomm-new-form-element-error-border-color-focus: var(--ecomm-new-color-error-01);
    --ecomm-new-form-element-error-outline-color-focus: var(--ecomm-new-color-error-01);
    --ecomm-new-form-element-error-background-color-focus: var(--ecomm-new-color-form-field-background-focus);
    --ecomm-new-form-element-error-box-shadow-focus:
        -2px -2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        2px -2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        2px 2px 0px 0px var(--ecomm-new-color-box-shadow-01),
        -2px 2px 0px 0px var(--ecomm-new-color-box-shadow-01);

    /* DISABLED */

    --ecomm-new-form-element-disabled-color: var(--ecomm-new-color-black-01);
    --ecomm-new-form-element-disabled-border-color: var(--ecomm-new-color-form-field-border);
    --ecomm-new-form-element-disabled-background-color: var(--ecomm-new-color-white-04);

    /* ERROR DISABLED */

    --ecomm-new-form-element-error-disabled-color: var(--ecomm-new-color-black-01);
    --ecomm-new-form-element-error-disabled-border-color: var(--ecomm-new-color-error-01);
    --ecomm-new-form-element-error-disabled-outline-color: var(--ecomm-new-color-error-01);
    --ecomm-new-form-element-error-disabled-background-color: var(--ecomm-new-color-white-04);

    /* READONLY DISABLED */

    --ecomm-new-form-element-readonly-disabled-color: var(--ecomm-new-color-black-01);
    --ecomm-new-form-element-readonly-disabled-border-color: var(--ecomm-new-color-form-field-border);
    --ecomm-new-form-element-readonly-disabled-background-color: var(--ecomm-new-color-white-04);

    /* PLACEHOLDER DISABLED */

    --ecomm-new-form-element-placeholder-disabled-color: var(--ecomm-new-color-form-placeholder-text);
}

/* HELPTEXT */

:root {
    --ecomm-new-form-helptext-color: var(--ecomm-new-color-black-01);
    --ecomm-new-form-helptext-line-height: 1.125rem;

    /* ERROR */

    --ecomm-new-form-helptext-error-color: var(--ecomm-new-color-error-01);
}


/* ICONS */

:root {
    /* ⚠️ The Colors of following icons need to change in url value */
    --ecomm-new-form-icon-search: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5792 14.9497H15.721L15.4168 14.6564C16.4814 13.418 17.1224 11.8102 17.1224 10.0612C17.1224 6.16124 13.9611 3 10.0612 3C6.16124 3 3 6.16124 3 10.0612C3 13.9611 6.16124 17.1224 10.0612 17.1224C11.8102 17.1224 13.418 16.4814 14.6564 15.4168L14.9497 15.721V16.5792L20.3814 22L22 20.3814L16.5792 14.9497ZM10.0612 14.9497C7.3562 14.9497 5.17267 12.7662 5.17267 10.0612C5.17267 7.3562 7.3562 5.17267 10.0612 5.17267C12.7662 5.17267 14.9497 7.3562 14.9497 10.0612C14.9497 12.7662 12.7662 14.9497 10.0612 14.9497Z' fill='%233B3F42'/%3E%3C/svg%3E%0A");
    --ecomm-new-form-icon-clear: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.34314 6.34332L11.9999 12.0001M11.9999 12.0001L17.6568 17.657M11.9999 12.0001L17.6568 6.34326M11.9999 12.0001L6.34308 17.657' stroke='%233B3F42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --ecomm-new-form-icon-datapicker: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3V3.5H19.5H20.5C21.3239 3.5 22 4.17614 22 5V21C22 21.8239 21.3239 22.5 20.5 22.5H4.5C3.67614 22.5 3 21.8239 3 21V5C3 4.17614 3.67614 3.5 4.5 3.5H5.5H6V3V1.5H7V3V3.5H7.5H17.5H18V3V1.5H19V3ZM20.5 21.5H21V21V10V9.5H20.5H4.5H4V10V21V21.5H4.5H20.5ZM20.5 8.5H21V8V5V4.5H20.5H4.5H4V5V8V8.5H4.5H20.5Z' fill='%233B3F42' stroke='%233B3F42'/%3E%3C/svg%3E%0A");
    --ecomm-new-form-icon-arrow: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%233B3F42' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    --ecomm-new-form-icon-point: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 12C10.9 12 10 11.1 10 10C10 8.9 10.9 8 12 8C13.1 8 14 8.9 14 10C14 11.1 13.1 12 12 12ZM18 10.2C18 6.57 15.35 4 12 4C8.65 4 6 6.57 6 10.2C6 12.54 7.95 15.64 12 19.34C16.05 15.64 18 12.54 18 10.2ZM12 2C16.2 2 20 5.22 20 10.2C20 13.52 17.33 17.45 12 22C6.67 17.45 4 13.52 4 10.2C4 5.22 7.8 2 12 2Z' fill='%233B3F42'/%3E%3C/svg%3E");
    --ecomm-new-form-icon-checkbox: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10L9 14.5L16 5" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round"/></svg>');
}

/* CHECKBOX */

:root {

    /* LABEL */

    --ecomm-new-form-checkbox-label-padding: 0 0 0 0.75rem;
    --ecomm-new-form-checkbox-label-font-size: 1rem;
    --ecomm-new-form-checkbox-label-line-height: 1.25rem;
    --ecomm-new-form-checkbox-label-font-weight: 400;
    --ecomm-new-form-checkbox-label-color: var(--ecomm-new-color-black-01);
    --ecomm-new-form-checkbox-label-disabled-color: var(--ecomm-new-color-black-01);
}

/* RADIO GROUPS */

/* Radio Items */

.ecomm-radio-group .slds-radio + .slds-radio {
    margin-top: 0.5rem;
}

/* Radio Item */

.ecomm-radio-group .slds-radio [type="radio"] + .slds-radio__label {
    display: flex;
}

/* Radio */

.ecomm-radio-group .slds-radio [type="radio"] + .slds-radio__label {
    display: inline-flex;
}

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

.ecomm-radio-group .slds-radio [type="radio"] + .slds-radio__label .slds-radio_faux::after {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Error */

.ecomm-radio-group.slds-has-error .slds-radio [type="radio"] + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-new-form-element-error-border-color);
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

.ecomm-radio-group.slds-has-error .slds-radio [type="radio"] + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Checked */

.ecomm-radio-group .slds-radio [type="radio"]:not(:disabled):checked + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-input-color-border-hover);
    background-color: var(--ecomm-input-color-border-hover);
}

.ecomm-radio-group .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Checked Error */

.ecomm-radio-group.slds-has-error .slds-radio [type="radio"]:not(:disabled):checked + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-new-form-element-error-border-color);
    background-color: var(--ecomm-new-form-element-error-border-color);
}

.ecomm-radio-group.slds-has-error .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Hover */

.ecomm-radio-group .slds-radio [type="radio"]:not(:disabled):hover + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-input-color-border-hover);
    background-color: var(--ecomm-new-color-form-checkbox-background);
    box-shadow: var(--ecomm-new-form-element-box-shadow-hover);
}

.ecomm-radio-group .slds-radio [type="radio"]:not(:disabled):hover + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Focus */

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

.ecomm-radio-group .slds-radio [type="radio"]:not(:disabled):focus + .slds-radio__label .slds-radio_faux::after,
.ecomm-radio-group .slds-radio [type="radio"]:not(:disabled):active + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Checked Hover */

.ecomm-radio-group .slds-radio [type="radio"]:checked:not(:disabled):hover + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-input-color-border-hover);
    background-color: var(--ecomm-input-color-border-hover);
    box-shadow: var(--ecomm-new-form-element-box-shadow-hover);
}

.ecomm-radio-group .slds-radio [type="radio"]:checked:not(:disabled):hover + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Checked Focus */

.ecomm-radio-group .slds-radio [type="radio"]:checked:not(:disabled):focus + .slds-radio__label .slds-radio_faux,
.ecomm-radio-group .slds-radio [type="radio"]:checked:not(:disabled):active + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-input-color-border-hover);
    background-color: var(--ecomm-input-color-border-hover);
    box-shadow: var(--ecomm-new-form-element-box-shadow-focus);
}

.ecomm-radio-group .slds-radio [type="radio"]:checked:not(:disabled):focus + .slds-radio__label .slds-radio_faux::after,
.ecomm-radio-group .slds-radio [type="radio"]:checked:not(:disabled):active + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Disabled */

.ecomm-radio-group .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-new-form-element-disabled-border-color);
    background-color: var(--ecomm-new-color-form-checkbox-background);
    box-shadow: none;
    cursor: not-allowed;
}

.ecomm-radio-group .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Disabled Error */

.ecomm-radio-group.slds-has-error .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-new-form-element-error-border-color);
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

.ecomm-radio-group.slds-has-error .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio Checked Disabled */

.ecomm-radio-group .slds-radio [type="radio"]:checked:disabled + .slds-radio__label .slds-radio_faux {
    border-color: var(--ecomm-new-form-element-disabled-border-color);
    background-color: var(--ecomm-new-form-element-disabled-border-color);
}

.ecomm-radio-group .slds-radio [type="radio"]:checked:disabled + .slds-radio__label .slds-radio_faux::after {
    background-color: var(--ecomm-new-color-form-checkbox-background);
}

/* Radio label */

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

/* Radio Label Disabled */

.ecomm-radio-group .slds-radio [type="radio"]:disabled + .slds-radio__label .slds-form-element__label {
    color: var(--ecomm-new-form-checkbox-label-disabled-color);
    cursor: not-allowed;
}