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

/* GROUP LABEL */

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

/* GROUP LABEL REQUIRED */

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

/* LABEL */

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

/* LABEL REQUIRED */

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

/* ELEMENT */

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

    /* READONLY */

    --ecomm-form-element-readonly-font-size: var(--ecomm-form-input-text-font-size);
    --ecomm-form-element-readonly-border-color: var(--ecomm-color-white-01);
    --ecomm-form-element-readonly-background-color: var(--ecomm-color-white-01);

    /* ERROR */

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

    /* HOVER */

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

    /* ERROR HOVER */

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

    /* FOCUS */

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

    /* ERROR FOCUS */

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

    /* DISABLED */

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

    /* ERROR DISABLED */

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

    /* READONLY DISABLED */

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

    /* PLACEHOLDER DISABLED */

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

/* HELPTEXT */

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

    /* ERROR */

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


/* ICONS */

:root {
    /* ⚠️ The Colors of following icons need to change in url value */
    --ecomm-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-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-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-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-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-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-form-checkbox-label-padding: 0 0 0 0.75rem;
    --ecomm-form-checkbox-label-font-size: 1rem;
    --ecomm-form-checkbox-label-line-height: 1.25rem;
    --ecomm-form-checkbox-label-font-weight: 400;
    --ecomm-form-checkbox-label-color: var(--ecomm-color-black-01);
    --ecomm-form-checkbox-label-disabled-color: var(--ecomm-color-black-04);
}