@use 'ej2-base/styles/definition/bootstrap' as *;
@forward 'ej2-base/styles/definition/bootstrap';

/*! Form bootstrap theme wise override definitions and variables */
// form field styles
$field-label-color: var(--content-text-color-alt-1, #343a40) !default;
$field-label-font-size: 12px !default;
$field-label-margin-bottom: 4px !default;
$field-label-font-weight: 400 !default;
$form-layout-margin-top: 20px !default;
$field-label-right-margin-top: 5px !default;

// group title styles
$group-title-color: var(--fg-content-text-color-alt-2, #6b7280) !default;
$group-title-border-color: $grey-base !default;
$form-group-border-none: none !default;
$form-padding-zero: 0 !default;
$form-margin-zero: 0 !default;
$form-group-title-position: relative !default;
$form-group-title-display: inline-block !default;
$form-group-title-padding-bottom: 8px !default;
$form-group-title-margin-bottom: 4px !default;
$form-group-title-font-size: 16px !default;
$form-group-title-border-position: absolute !default;
$form-group-title-border-bottom: 0 !default;
$form-group-title-border-left: 0 !default;
$form-group-title-border-width: 100% !default;
$form-group-title-border-height: 1px !default;
$form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;

//tooltip styles
$form-tooltip-background-color:  $brand-danger-light !default;
$form-tooltip-color: $brand-danger-dark !default;
$form-validation-message-font-size: 12px;

// form common styles
$form-display-flex: flex !default;
$form-label-top-direction: column !default;
$form-label-text-align: center !default;
$form-button-left-justify: flex-start !default;
$form-button-right-justify: flex-end !default;
$form-button-center-justify: center !default;
$form-button-border-radius: 20px !default;
$form-button-padding: 7px 16px !default;

$form-data-label-margin-right: 12px !default;
$form-switch-wrapper-margin-top: 3px !default;
$form-switch-wrapper-margin-left: 5px !default;
$form-button-margin-top: 24px !default;
$form-button-gap: 10px !default;
$form-child-layout-margin-top: 0 !default;
$form-item-wrapper-width: calc(75% - 12px);
$form-label-q-width: 25%;
$form-full-width: 100%;