SASS 变量

// sass-lint:disable max-file-line-count
// sass-lint:disable max-line-length
// sass-lint:disable space-after-comma



$opacity-emphasis:      1 !default
$opacity-main:          0.9 !default
$opacity-muted:         0.618 !default
$opacity-more-muted:    0.382 !default
$opacity-most-muted:    0.1 !default
$opacity-disabled:      $opacity-muted



$color-primary:             #4f726c !default
$color-secondary:           #8f9091 !default
$color-danger:              #d12626 !default
$color-dark:                #1f1f1f !default
$color-light:               #fff !default
$color-main:                lighten($color-dark, 10%) !default
$color-muted:               lighten($color-dark, 60%) !default
$color-inverse-main:        rgba($color-light, $opacity-main) !default



$background-color-primary:             $color-primary !default
$background-color-secondary:           lighten($color-secondary, 30%) !default
$background-color-danger:              $color-danger !default
$background-color-dark:                lighten($color-dark, 10%) !default
$background-color-light:               $color-light !default
$background-color-muted:               darken($background-color-light, 3%) !default
$background-color-main:                $background-color-light !default



$line-color-primary:             $color-primary !default
$line-color-secondary:           lighten($color-secondary, 30%) !default
$line-color-danger:              $color-danger !default
$line-color-dark:                $color-dark !default
$line-color-light:               $color-light !default
$line-color-main:                darken($line-color-light, 30%) !default
$line-color-muted:               darken($line-color-light, 8%) !default
$line-width-main:                1px !default



$border-radius-sharp:            0 !default
$border-radius-rounded:          2px !default
$border-radius-rounded-large:    6px !default
$border-radius-circle:           9999px !default
$border-radius-main:             $border-radius-rounded !default



$box-shadow-low:             0 4px 14px rgba(0, 0, 0, 0.08) !default
$box-shadow-normal:          0 6px 20px rgba(0, 0, 0, 0.112) !default
$box-shadow-high:            0 10px 28px rgba(0, 0, 0, 0.1568) !default



$text-shadow-low:            null !default
$text-shadow-normal:         null !default
$text-shadow-high:           null !default



$transition-duration-short:          0.25s !default
$transition-duration-normal:         0.5s !default
$transition-duration-long:           1s !default
$transition-timing-function-main:    ease !default



$baseline-height:          12px !default



$spacing-tiny:      baseline(0.5) !default
$spacing-small:     baseline(1) !default
$spacing-medium:    baseline(2) !default
$spacing-large:     baseline(4) !default



$z-index-low:             -1 !default
$z-index-normal:          0 !default
$z-index-high:            1 !default
$z-index-higher:          2 !default
$z-index-much-higher:     3 !default
$z-index-highest:         4 !default



$width-breakpoint-small:     768px !default
$width-breakpoint-medium:    1024px !default
$width-breakpoint-large:     1366px !default



$font-family-code:     SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace !default



$base-font-size:                          16px !default
$base-line-height:                        1.5 !default
$base-scrollbar-vertical-width:           $spacing-tiny !default
$base-scrollbar-horizontal-height:        $base-scrollbar-vertical-width !default
$base-scrollbar-thumb-background:         rgba($color-muted, $opacity-more-muted) !default
$base-scrollbar-thumb-border-radius:      $base-scrollbar-vertical-width !default
$base-scrollbar-firefox-width-keyword:    thin !default
$base-scrollbar-firefox-color:            rgba($color-muted, $opacity-more-muted) transparent !default
$base-scrollbar-edge-overflow-style:      -ms-autohiding-scrollbar !default



$component-alert-padding:                     baseline(0.5) baseline(1) !default
$component-alert-border-radius:               $border-radius-main !default
$component-alert-box-shadow:                  null !default

$component-alert-title-margin:                null !default
$component-alert-title-font-size:             16px !default
$component-alert-title-line-height:           1.5 !default
$component-alert-title-font-weight:           700 !default

$component-alert-text-margin:          null !default
$component-alert-text-font-size:       14px !default
$component-alert-text-line-height:     1.5 !default

$component-alert-info-color:               #014361 !default
$component-alert-info-background:          #e5f6fd !default
$component-alert-success-color:            #1e4620 !default
$component-alert-success-background:       #edf7ed !default
$component-alert-error-color:              #5f2120 !default
$component-alert-error-background:         #fdeded !default
$component-alert-warning-color:            #663c00 !default
$component-alert-warning-background:       #fff4e5 !default



$component-button-border-width:                    $line-width-main !default
$component-button-border-style:                    solid !default
$component-button-border-radius:                   $border-radius-main !default
$component-button-font-size:                       16px !default
$component-button-small-font-size:                 12px !default
$component-button-large-font-size:                 18px !default
$component-button-height:                          baseline(3) !default
$component-button-small-height:                    baseline(2) !default
$component-button-large-height:                    baseline(4) !default
$component-button-padding-em:                      0 1em !default
$component-button-disabled-opacity:                $opacity-disabled !default



$component-button-primary-color:                  $color-inverse-main !default
$component-button-primary-hover-color:            null !default
$component-button-primary-active-color:           null !default
$component-button-primary-background:             $background-color-primary !default
$component-button-primary-hover-background:       darken($background-color-primary, 2%) !default
$component-button-primary-active-background:      darken($background-color-primary, 4%) !default
$component-button-primary-border-color:           darken($background-color-primary, 6%) !default
$component-button-primary-hover-border-color:     darken($background-color-primary, 8%) !default
$component-button-primary-active-border-color:    darken($background-color-primary, 10%) !default
$component-button-primary-box-shadow:             null !default
$component-button-primary-hover-box-shadow:       $box-shadow-low !default
$component-button-primary-active-box-shadow:      none !default



$component-button-secondary-color:                  $color-main !default
$component-button-secondary-hover-color:            null !default
$component-button-secondary-active-color:           null !default
$component-button-secondary-background:             $background-color-secondary !default
$component-button-secondary-hover-background:       darken($background-color-secondary, 2%) !default
$component-button-secondary-active-background:      darken($background-color-secondary, 4%) !default
$component-button-secondary-border-color:           darken($background-color-secondary, 4%) !default
$component-button-secondary-hover-border-color:     darken($background-color-secondary, 6%) !default
$component-button-secondary-active-border-color:    darken($background-color-secondary, 8%) !default
$component-button-secondary-box-shadow:             null !default
$component-button-secondary-hover-box-shadow:       $box-shadow-low !default
$component-button-secondary-active-box-shadow:      none !default



$component-button-danger-color:                  $color-inverse-main !default
$component-button-danger-hover-color:            null !default
$component-button-danger-active-color:           null !default
$component-button-danger-background:             $background-color-danger !default
$component-button-danger-hover-background:       darken($background-color-danger, 2%) !default
$component-button-danger-active-background:      darken($background-color-danger, 4%) !default
$component-button-danger-border-color:           darken($background-color-danger, 6%) !default
$component-button-danger-hover-border-color:     darken($background-color-danger, 8%) !default
$component-button-danger-active-border-color:    darken($background-color-danger, 10%) !default
$component-button-danger-box-shadow:             null !default
$component-button-danger-hover-box-shadow:       $box-shadow-low !default
$component-button-danger-active-box-shadow:      none !default



$component-button-dark-color:                  $color-inverse-main !default
$component-button-dark-hover-color:            null !default
$component-button-dark-active-color:           null !default
$component-button-dark-background:             $background-color-dark !default
$component-button-dark-hover-background:       darken($background-color-dark, 2%) !default
$component-button-dark-active-background:      darken($background-color-dark, 4%) !default
$component-button-dark-border-color:           darken($background-color-dark, 6%) !default
$component-button-dark-hover-border-color:     darken($background-color-dark, 8%) !default
$component-button-dark-active-border-color:    darken($background-color-dark, 10%) !default
$component-button-dark-box-shadow:             null !default
$component-button-dark-hover-box-shadow:       $box-shadow-low !default
$component-button-dark-active-box-shadow:      none !default



$component-button-light-color:                  $color-dark !default
$component-button-light-hover-color:            null !default
$component-button-light-active-color:           null !default
$component-button-light-background:             $background-color-light !default
$component-button-light-hover-background:       darken($background-color-light, 2%) !default
$component-button-light-active-background:      darken($background-color-light, 4%) !default
$component-button-light-border-color:           darken($background-color-light, 4%) !default
$component-button-light-hover-border-color:     darken($background-color-light, 6%) !default
$component-button-light-active-border-color:    darken($background-color-light, 8%) !default
$component-button-light-box-shadow:             null !default
$component-button-light-hover-box-shadow:       $box-shadow-low !default
$component-button-light-active-box-shadow:      none !default



$component-button-hollow-primary-color:                  $color-primary !default
$component-button-hollow-primary-hover-color:            null !default
$component-button-hollow-primary-active-color:           $color-inverse-main !default
$component-button-hollow-primary-hover-background:       rgba($background-color-primary, $opacity-most-muted) !default
$component-button-hollow-primary-active-background:      $component-button-primary-active-background !default
$component-button-hollow-primary-border-color:           $component-button-primary-border-color !default
$component-button-hollow-primary-hover-border-color:     $component-button-primary-hover-border-color !default
$component-button-hollow-primary-active-border-color:    $component-button-primary-active-border-color !default
$component-button-hollow-primary-box-shadow:             $component-button-primary-box-shadow !default
$component-button-hollow-primary-hover-box-shadow:       $component-button-primary-hover-box-shadow !default
$component-button-hollow-primary-active-box-shadow:      $component-button-primary-active-box-shadow !default



$component-button-hollow-secondary-color:                  $color-main !default
$component-button-hollow-secondary-hover-color:            null !default
$component-button-hollow-secondary-active-color:           null !default
$component-button-hollow-secondary-hover-background:       rgba($background-color-secondary, $opacity-more-muted) !default
$component-button-hollow-secondary-active-background:      $component-button-secondary-active-background !default
$component-button-hollow-secondary-border-color:           $line-color-secondary !default
$component-button-hollow-secondary-hover-border-color:     null !default
$component-button-hollow-secondary-active-border-color:    $component-button-secondary-active-border-color !default
$component-button-hollow-secondary-box-shadow:             $component-button-secondary-box-shadow !default
$component-button-hollow-secondary-hover-box-shadow:       $component-button-secondary-hover-box-shadow !default
$component-button-hollow-secondary-active-box-shadow:      $component-button-secondary-active-box-shadow !default



$component-button-hollow-danger-color:                  $color-danger !default
$component-button-hollow-danger-hover-color:            null !default
$component-button-hollow-danger-active-color:           $color-inverse-main !default
$component-button-hollow-danger-hover-background:       rgba($background-color-danger, $opacity-most-muted) !default
$component-button-hollow-danger-active-background:      $component-button-danger-active-background !default
$component-button-hollow-danger-border-color:           $component-button-danger-border-color !default
$component-button-hollow-danger-hover-border-color:     null !default
$component-button-hollow-danger-active-border-color:    $component-button-danger-active-border-color !default
$component-button-hollow-danger-box-shadow:             $component-button-danger-box-shadow !default
$component-button-hollow-danger-hover-box-shadow:       $component-button-danger-hover-box-shadow !default
$component-button-hollow-danger-active-box-shadow:      $component-button-danger-active-box-shadow !default



$component-button-hollow-dark-color:                  $color-dark !default
$component-button-hollow-dark-hover-color:            null !default
$component-button-hollow-dark-active-color:           $color-inverse-main !default
$component-button-hollow-dark-hover-background:       rgba($background-color-dark, $opacity-most-muted) !default
$component-button-hollow-dark-active-background:      $component-button-dark-active-background !default
$component-button-hollow-dark-border-color:           $component-button-dark-border-color !default
$component-button-hollow-dark-hover-border-color:     null !default
$component-button-hollow-dark-active-border-color:    $component-button-dark-active-border-color !default
$component-button-hollow-dark-box-shadow:             $component-button-dark-box-shadow !default
$component-button-hollow-dark-hover-box-shadow:       $component-button-dark-hover-box-shadow !default
$component-button-hollow-dark-active-box-shadow:      $component-button-dark-active-box-shadow !default



$component-button-hollow-light-color:                  $color-light !default
$component-button-hollow-light-hover-color:            null !default
$component-button-hollow-light-active-color:           $color-dark !default
$component-button-hollow-light-hover-background:       rgba($background-color-light, $opacity-most-muted) !default
$component-button-hollow-light-active-background:      $component-button-light-active-background !default
$component-button-hollow-light-border-color:           $color-light !default
$component-button-hollow-light-hover-border-color:     null !default
$component-button-hollow-light-active-border-color:    $component-button-light-active-border-color !default
$component-button-hollow-light-box-shadow:             $component-button-light-box-shadow !default
$component-button-hollow-light-hover-box-shadow:       $component-button-light-hover-box-shadow !default
$component-button-hollow-light-active-box-shadow:      $component-button-light-active-box-shadow !default



$component-button-text-primary-color:                 $color-primary !default
$component-button-text-primary-hover-color:           darken($color-primary, 10%) !default
$component-button-text-primary-active-color:          darken($color-primary, 15%) !default
$component-button-text-primary-hover-background:      rgba($background-color-primary, $opacity-most-muted) !default
$component-button-text-primary-active-background:     rgba($background-color-primary, $opacity-more-muted) !default



$component-button-text-secondary-color:                 darken($color-secondary, 10%) !default
$component-button-text-secondary-hover-color:           darken($color-secondary, 20%) !default
$component-button-text-secondary-active-color:          darken($color-secondary, 25%) !default
$component-button-text-secondary-hover-background:      rgba($background-color-secondary, $opacity-more-muted) !default
$component-button-text-secondary-active-background:     rgba($background-color-secondary, $opacity-muted) !default



$component-button-text-danger-color:                 $color-danger !default
$component-button-text-danger-hover-color:           darken($color-danger, 5%) !default
$component-button-text-danger-active-color:          darken($color-danger, 10%) !default
$component-button-text-danger-hover-background:      rgba($background-color-danger, $opacity-most-muted) !default
$component-button-text-danger-active-background:     rgba($background-color-danger, $opacity-more-muted) !default



$component-button-text-dark-color:                 lighten($color-dark, 10%) !default
$component-button-text-dark-hover-color:           lighten($color-dark, 5%) !default
$component-button-text-dark-active-color:          $color-dark !default
$component-button-text-dark-hover-background:      rgba($background-color-dark, $opacity-more-muted) !default
$component-button-text-dark-active-background:     rgba($background-color-dark, $opacity-muted) !default



$component-button-text-light-color:                 darken($color-light, 10%) !default
$component-button-text-light-hover-color:           darken($color-light, 5%) !default
$component-button-text-light-active-color:          $color-light !default
$component-button-text-light-hover-background:      rgba($background-color-light, $opacity-more-muted) !default
$component-button-text-light-active-background:     rgba($background-color-light, $opacity-muted) !default



$component-button-group-box-shadow:             null !default



$component-icon-size:            1em !default
$component-icon-stroke-width:    2px !default



$component-button-icon-size:                 null !default
$component-button-icon-top-size:             null !default
$component-button-icon-left-margin:          0 0.5em 0 0 !default
$component-button-icon-right-margin:         0 0 0 0.5em !default
$component-button-icon-top-margin:           0.1em 0 !default
$component-button-icon-top-height:           baseline(4) !default
$component-button-icon-top-small-height:     baseline(3) !default
$component-button-icon-top-large-height:     baseline(5) !default



$component-form-tag-disabled-opacity:         $opacity-disabled !default



$component-form-label-font-size:                 16px !default
$component-form-label-small-font-size:           12px !default
$component-form-label-large-font-size:           18px !default
$component-form-label-line-height:               1.5 !default
$component-form-label-small-line-height:         null !default
$component-form-label-large-line-height:         null !default
$component-form-label-color:                     $color-main !default
$component-form-label-required-content:          " *" !default
$component-form-label-required-content-color:    $color-danger !default



$component-form-element-height:                              baseline(3) !default
$component-form-element-small-height:                        baseline(2) !default
$component-form-element-large-height:                        baseline(4) !default
$component-form-element-multiple-rows-height:                $component-form-element-height * 3 !default
$component-form-element-multiple-rows-small-height:          $component-form-element-small-height * 3 !default
$component-form-element-multiple-rows-large-height:          $component-form-element-large-height * 3 !default
$component-form-element-font-size:                           16px !default
$component-form-element-small-font-size:                     12px !default
$component-form-element-large-font-size:                     18px !default
$component-form-element-multiple-rows-line-height:           1.5 !default
$component-form-element-multiple-rows-small-line-height:     null !default
$component-form-element-multiple-rows-large-line-height:     null !default
$component-form-element-padding-em:                          0 0.5em !default
$component-form-element-multiple-rows-padding-em:            0.5em !default
$component-form-element-with-icon-padding-em:                0 2em 0 0.5em !default

$component-form-element-border-width:                        $line-width-main !default
$component-form-element-border-style:                        solid !default
$component-form-element-border-radius:                       $border-radius-main !default
$component-form-element-border-color:                        $line-color-muted !default
$component-form-element-background:                          $background-color-main !default
$component-form-element-box-shadow:                          null !default
$component-form-element-color:                               $color-main !default

$component-form-element-invalid-border-color:     $line-color-danger !default
$component-form-element-invalid-background:       null !default
$component-form-element-invalid-box-shadow:       0 0 0 2px rgba($line-color-danger, $opacity-most-muted) !default
$component-form-element-invalid-color:            null !default

$component-form-element-focus-border-color:       $line-color-dark !default
$component-form-element-focus-background:         null !default
$component-form-element-focus-box-shadow:         0 0 0 2px rgba($line-color-dark, $opacity-most-muted) !default
$component-form-element-focus-color:              null !default



$component-form-element-single-select-icon:                  '<svg viewBox="0 0 18 18"><path fill="#fill" d="M2.16,6.246 C2.385,6.246 2.61,6.308 2.81,6.442 L9.039,10.598 L15.076,6.401 C15.617,6.042 16.346,6.188 16.705,6.729 C17.065,7.268 16.92,8 16.38,8.359 L9.692,12.989 C9.298,13.253 8.784,13.254 8.388,12.991 L1.508,8.402 C0.966,8.042 0.82,7.31 1.179,6.77 C1.407,6.429 1.78,6.246 2.16,6.246 L2.16,6.246 Z"></path></svg>' !default
$component-form-element-single-select-background:            url(svg-icon($component-form-element-single-select-icon, rgba($color-dark, $opacity-most-muted))) right 0.5em (center / 1em) no-repeat, $background-color-main !default
$component-form-element-single-select-invalid-background:    url(svg-icon($component-form-element-single-select-icon, rgba($color-danger, $opacity-muted))) right 0.5em (center / 1em) no-repeat, $background-color-main !default
$component-form-element-single-select-focus-background:      url(svg-icon($component-form-element-single-select-icon, rgba($color-dark, $opacity-muted))) right 0.5em (center / 1em) no-repeat, $background-color-main !default



$component-form-element-checkfield-label-padding:          0 0 0 1.65em !default
$component-form-element-checkfield-label-margin:           0 1.2em 0 0 !default
$component-form-element-checkfield-input-margin:           0.125em 0.4em 0 -1.65em !default
$component-form-element-checkfield-input-small-margin:     0.1em 0.4em 0 -1.65em !default
$component-form-element-checkfield-input-large-margin:     0.042em 0.4em 0 -1.65em !default
$component-form-element-checkfield-input-size-em:          1.25em !default



$component-form-element-checkfield-checked-icon:                   '<svg viewBox="-150 -150 800 800"><path fill="#fill" d="M487.75,78.125c-13-13-33-13-46,0l-272,272l-114-113c-13-13-33-13-46,0s-13,33,0,46l137,136c6,6,15,10,23,10s17-4,23-10l295-294C500.75,112.125,500.75,91.125,487.75,78.125z"/></svg>' !default
$component-form-element-checkfield-checked-background:             url(svg-icon($component-form-element-checkfield-checked-icon, $component-form-element-color)) (center / contain) no-repeat, $background-color-main !default
$component-form-element-checkfield-checked-focus-background:       null !default
$component-form-element-checkfield-checked-invalid-background:     null !default



$component-form-helper-font-size:                    12px !default
$component-form-helper-small-font-size:              null !default
$component-form-helper-large-font-size:              14px !default
$component-form-helper-line-height:                  1.5 !default
$component-form-helper-small-line-height:            null !default
$component-form-helper-large-line-height:            null !default
$component-form-helper-hint-color:                   $color-muted !default
$component-form-helper-error-color:                  $color-danger !default
$component-form-helper-placeholder-color:            $color-muted !default
$component-form-helper-placeholder-invalid-color:    null !default
$component-form-helper-placeholder-focus-color:      null !default



$component-form-field-label-margin:            0 0 baseline(0.5) !default
$component-form-field-label-small-margin:      0 !default
$component-form-field-label-large-margin:      null !default
$component-form-field-helper-margin:           baseline(0.5) 0 0 !default
$component-form-field-helper-small-margin:     0 !default
$component-form-field-helper-large-margin:     null !default



$component-highlight-border-radius:            null !default
$component-highlight-hint-margin-y:            baseline(0.5) !default
$component-highlight-on-padding:               baseline(1) !default
$component-highlight-on-box-shadow:            null !default
$component-highlight-off-padding:              0 !default
$component-highlight-off-box-shadow:           null !default
$component-highlight-info-on-background:       lighten($component-alert-info-color, 60%) !default
$component-highlight-success-on-background:    lighten($component-alert-success-color, 60%) !default
$component-highlight-error-on-background:      #fcbaba !default
$component-highlight-warning-on-background:    lighten($component-alert-warning-color, 60%) !default



$component-tabs-header-padding:                baseline(0.5) baseline(1) !default
$component-tabs-header-font-weight:            700 !default
$component-tabs-header-blackground:            $background-color-muted
$component-tabs-header-box-shadow:             null !default
$component-tabs-title-margin:                  0 auto 0 0 !default
$component-tabs-title-font-size:               16px !default
$component-tabs-title-font-weight:             700 !default
$component-tabs-title-line-height:             1.5 !default
$component-tabs-title-color:                   $color-main !default
$component-tabs-label-margin:                  0 0 0 baseline(1) !default
$component-tabs-label-padding:                 baseline(0.25) !default
$component-tabs-label-font-size:               12px !default
$component-tabs-label-color:                   $color-secondary !default
$component-tabs-label-border-color:            $color-secondary !default
$component-tabs-label-border-width:            2px !default
$component-tabs-label-border-style:            solid !default
$component-tabs-label-hover-color:             $color-main !default
$component-tabs-label-hover-border-color:      $color-main !default
$component-tabs-label-active-color:            $color-main !default
$component-tabs-label-active-border-color:     $color-main !default
$component-tabs-pane-padding:                  baseline(1) !default



$member-previewer-container-padding:          baseline(1) !default
$member-previewer-container-background:       $background-color-light !default
$member-previewer-container-border-radius:    $border-radius-main !default



$member-editor-background:     $background-color-main !default



$member-prop-editor-condition-branch-title-margin:                 0 0 baseline(0.5) !default
$member-prop-editor-condition-branch-title-font-size:              16px !default
$member-prop-editor-condition-branch-title-font-weight:            700 !default
$member-prop-editor-condition-when-branch-button-group-margin:     baseline(0.5) 0 baseline(1) !default
$member-prop-editor-condition-rule-margin:                         0 0 baseline(0.5) !default
$member-prop-editor-condition-rule-row-margin:                     0 0 baseline(0.5) !default
$member-prop-editor-condition-rule-child-margin:                   0 baseline(0.5) 0 0 !default
$member-prop-editor-condition-rule-logic-width:                    baseline(6) !default



$member-prop-editor-options-item-margin:           0 0 baseline(0.5) !default
$member-prop-editor-options-item-child-margin:     0 baseline(0.5) 0 0 !default
$member-prop-editor-options-item-label-margin:     0 baseline(0.5) !default



$member-prop-editor-validation-item-margin:        0 0 baseline(0.5) !default
$member-prop-editor-validation-item-row-margin:    0 baseline(0.5) 0 0 !default



$fieldset-padding:                    baseline(2) baseline(1) !default
$fieldset-background:                 null !default
$fieldset-title-margin:               0 0 baseline(0.5) !default
$fieldset-title-font-size:            22px !default
$fieldset-title-line-height:          1.2 !default
$fieldset-title-font-weight:          700 !default
$fieldset-title-color:                $color-main !default
$fieldset-description-margin:         null !default
$fieldset-description-font-size:      16px !default
$fieldset-description-line-height:    1.5 !default
$fieldset-description-color:          $color-secondary !default



$subform-container-padding:               baseline(1) !default
$subform-container-background:            $background-color-muted !default
$subform-container-border-width:          $line-width-main !default
$subform-container-border-color:          $line-color-muted !default
$subform-container-border-radius:         $border-radius-main !default

$subform-fieldset-descendants-element-margin:    0 auto baseline(1) auto !default
$subform-fieldset-actions-element-margin:        baseline(0.5) baseline(1) baseline(1.5) 0 !default

$subform-previewer-container-border-radius:    $border-radius-rounded-large !default
$subform-previewer-container-padding:          $member-previewer-container-padding !default
$subform-previewer-container-background:       $member-previewer-container-background !default

$subform-fieldset-member-actions-background:                         $background-color-muted !default
$subform-fieldset-member-actions-border-width:                       $line-width-main !default
$subform-fieldset-member-actions-border-color:                       $line-color-muted !default
$subform-fieldset-member-previewer-border-width:                     $subform-fieldset-member-actions-border-width !default
$subform-fieldset-member-previewer-border-color:                     $subform-fieldset-member-actions-border-color !default
$subform-fieldset-member-previewer-highlight-error-on-background:    lighten($component-highlight-error-on-background, 6%) !default



$form-background:             $background-color-main !default
$form-member-margin:          0 auto baseline(2) !default
$form-fieldset-margin:        0 auto baseline(1) !default
$form-fieldset-background:    $background-color-muted !default
$form-descendants-margin:     0 auto !default
$form-descendants-padding:    baseline(1) !default



$form-builder-background:    $background-color-muted !default

$form-builder-editor-padding-medium:       baseline(1) 0 0 0 !default
$form-builder-editor-background:           $background-color-light !default
$form-builder-editor-box-shadow-medium:    -1px -1px 12px rgba(0, 0, 0, 0.26) !default !default

$form-builder-previewer-padding:              0 0 baseline(1) !default
$form-builder-previewer-padding-medium:       baseline(1) !default
$form-builder-previewer-children-max-width:   640px !default

$form-builder-inserter-margin:                          baseline(1) auto !default
$form-builder-inserter-of-root-padding:                 baseline(3) 0 baseline(2) !default
$form-builder-insert-child-select-box-shadow-medium:    $box-shadow-normal !default

$form-builder-member-margin:               baseline(1) auto !default
$form-builder-fieldset-margin:             baseline(1) auto baseline(3) !default
$form-builder-member-border-radius:        $border-radius-rounded-large !default
$form-builder-member-box-shadow:           $box-shadow-low !default
$form-builder-descendants-padding:         0 baseline(2) !default

$form-builder-modal-content-max-height:          61.8% !default
$form-builder-modal-content-max-height-medium:   360px !default
$form-builder-modal-background:                  rgba($background-color-dark, $opacity-more-muted) !default

$form-builder-actions-padding:        baseline(0.5) baseline(1) !default
$form-builder-actions-background:     lighten($background-color-dark, 20%) !default
$form-builder-actions-child-margin:   0 baseline(1) 0 0 !default

$form-builder-exception-max-width:          480px !default
$form-builder-exception-position-top:       null !default
$form-builder-exception-position-right:     baseline(2) !default
$form-builder-exception-position-bottom:    baseline(2) !default
$form-builder-exception-position-left:      baseline(2) !default
$form-builder-exception-box-shadow:         $box-shadow-high !default