// Form Builder styles.
//
// Colors.
//
// @since 1.8.0

// Colors by name:
$color_white:                     #ffffff;
$color_black:                     #2d2d2d;

$color_dark_red:                  #b32d2e;
$color_red:                       #d63638;
$color_bright_red:                #ee5c5c;
$color_lightest_red:              #fcf0f1;

$color_dark_green:                #008a20;
$color_green:                     #00a32a;
$color_lightest_green:            #edfaef;
$color_darker_blue:               #005387;
$color_dark_blue:                 #215d8f;
$color_blue:                      #036aab;
$color_bright_blue:               #0399ed;
$color_bright_blue_alt:           #4285f4;
$color_brighter_blue:             #00c6bf;
$color_light_blue:                #79c2f4;
$color_lighter_blue:              #cce0ed;
$color_lightest_blue:             #f1f6fa;

$color_dark_orange:               #cd6622;
$color_orange:                    #e27730;
$color_light_orange:              #f48120;

$color_dark_yellow:               #ffaa00;
$color_yellow:                    #ffb900;
$color_lightest_yellow:           #fcf9e8;

$color_dark_orange:               #a95822;
$color_orange:                    #e27730;
$color_lightest_orange:           #fba267;

$color_darker_grey:               #626262;
$color_dark_grey:                 #666666;
$color_bright_grey:               #aaaaaa;
$color_bright_grey_alt:           #b6b6b6;
$color_brighter_grey:             #cccccc;
$color_brighter_grey_alt:         #d6d6d6;
$color_brightest_grey:            #e8e8e8;
$color_light_grey:                #f1f1f1;
$color_lighter_grey:              #f6f6f6;
$color_lightest_grey:             #f8f8f8;

// Colors by usage:
$color_black_background:          #2d2d2d;
$color_black_background_hover:    #444444;
$color_dark_grey_background:      #6d6d6d;
$color_grey_background:           #eeeeee;
$color_grey_background_hover:     #d7d7d7;
$color_light_background:          #f8f8f8;
$color_light_background_hover:    #eeeeee;

$color_divider:                   #dddddd;
$color_border:                    #cccccc;
$color_border_hover:              #999999;
$color_hint:                      #bbbbbb;
$color_primary_text:              #444444;
$color_secondary_text:            #777777;
$color_light_text:                #86919e;
$color_lighter_text:              #999999;

$color_fields_tabs:               #e0e8f0;
$color_fields_divider:            #ced7e0;
$color_fields_background:         #ebf3fc;
$color_fields_background_hover:   #e0e8f0;
$color_fields_border:             #b0b6bd;
$color_fields_hint:               #b0b6bd;
$color_fields_secondary_text:     #86919e;
$color_preview_button_background: #999999;

$color_close:                     #bbbbbb;
$color_close_hover:               #777777;

$color_button_icon_light_grey:    #a6a6a6;
$color_button_icon_grey:          #999999;

// Semitransparent colors:
$color_white_trans_35:            rgba( 255, 255, 255, .35 );
$color_white_trans_65:            rgba( 255, 255, 255, .65 );
$color_white_trans_60:            rgba( 255, 255, 255, .6 );
$color_black_trans_35:            rgba( 0, 0, 0, .35 );

$color_scrollbar:                 rgba( 0, 0, 0, .15 );
$color_scrollbar_hover:           rgba( 0, 0, 0, .5 );

$color_box_shadow:                rgba( 0, 0, 0, .1 );

// We need this var since $blue used in `_choices.scss`,
// which is used in the `admin.scss` as well.
$blue: $color_blue;