// variables

// colors

@white:    #fff;
@gray-100: #f8f9fa;
@gray-200: #e9ecef;
@gray-300: #dee2e6;
@gray-400: #ced4da;
@gray-500: #adb5bd;
@gray-600: #6c757d;
@gray-700: #495057;
@gray-800: #343a40;
@gray-900: #212529;
@black:    #000;

@grays: {
	100: @gray-100;
	200: @gray-200;
	300: @gray-300;
	400: @gray-400;
	500: @gray-500;
	600: @gray-600;
	700: @gray-700;
	800: @gray-800;
	900: @gray-900;
};

@blue:    #007bff;
@indigo:  #6610f2;
@purple:  #6f42c1;
@pink:    #e83e8c;
@red:     #dc3545;
@orange:  #fd7e14;
@yellow:  #ffc107;
@green:   #28a745;
@teal:    #20c997;
@cyan:    #17a2b8;

@colors: {
	blue:       @blue;
	indigo:     @indigo;
	purple:     @purple;
	pink:       @pink;
	red:        @red;
	orange:     @orange;
	yellow:     @yellow;
	green:      @green;
	teal:       @teal;
	cyan:       @cyan;
	white:      @white;
	gray:       @gray-600;
	gray-dark:  @gray-800;
};

@primary:       @blue;
@secondary:     @gray-600;
@success:       @green;
@info:          @cyan;
@warning:       @yellow;
@danger:        @red;
@light:         @gray-100;
@dark:          @gray-800;

@theme-colors: {
	primary:     @primary;
	secondary:   @secondary;
	success:     @success;
	info:        @info;
	warning:     @warning;
	danger:      @danger;
	light:       @light;
	dark:        @dark;
};

// Set a specific jump point for requesting color jumps
@theme-color-interval:      8%;

// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
@yiq-contrasted-threshold:  150;

// Customize the light and dark text colors for use in our YIQ color contrast function.
@yiq-text-dark:             @gray-900;
@yiq-text-light:            @white;

// Characters which are escaped by the escape-svg function
// LESS PORT: Because of the unconventional use of special characters here, the value of this
// variable is considered to be a whole string -- not a ruleset!
@escaped-characters: {
	<: %3c;
	>: %3e;
	#: %23;
};


// Options

// LESS PORT: Note that `false` has no actual meaning in Less, but in this case it has the desired
// effect (of disabling a feature) only because it’s not `true`, which is what Less cares about.
@enable-caret:                                true;
@enable-rounded:                              true;
@enable-shadows:                              false;
@enable-gradients:                            false;
@enable-transitions:                          true;
@enable-prefers-reduced-motion-media-query:   true;
@enable-hover-media-query:                    false; // Deprecated, no longer affects any compiled CSS
@enable-grid-classes:                         true;
@enable-pointer-cursor-for-buttons:           true;
@enable-print-styles:                         true;
@enable-responsive-font-sizes:                false;
@enable-validation-icons:                     true;
@enable-deprecation-messages:                 true;


// body

@body-bg:                   @white;
@body-color:                @gray-900;


// links

@link-color:                              theme-color(primary);
@link-decoration:                         none;
@link-hover-color:                        darken(@link-color, 15%);
@link-hover-decoration:                   underline;
// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
@emphasized-link-hover-darken-percentage: 15%;

// Paragraphs

@paragraph-margin-bottom:   1rem;


// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.

@grid-breakpoints: {
	xs: 0;
	sm: 576px;
	md: 768px;
	lg: 992px;
	xl: 1200px;
};

//@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
//@include _assert-starts-at-zero($grid-breakpoints);


// Grid containers
//
// Define the maximum width of `.container` for different screen sizes.

@container-max-widths: {
	sm: 540px;
	md: 720px;
	lg: 960px;
	xl: 1140px;
};


// Grid columns
//
// Set the number of columns and specify the width of the gutters.

@grid-columns:                12;
@grid-gutter-width:           30px;
@grid-row-columns:            6;


// Components
// Define common padding and border radius sizes and more.

@line-height-lg:              1.5;
@line-height-sm:              1.5;

@border-width:                1px;
@border-color:                @gray-300;

@border-radius:               0.25rem;
@border-radius-lg:            0.3rem;
@border-radius-sm:            0.2rem;

@component-active-color:      @white;
@component-active-bg:         theme-color(primary);


// Typography
// Font, line-height, and color for body text, headings, and more.

@font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
@font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@font-family-base:            @font-family-sans-serif;

@font-size-base:              1rem; // Assumes the browser default, typically `16px`
@font-size-lg:                (@font-size-base * 1.25);
@font-size-sm:                (@font-size-base * 0.875);

@font-weight-lighter:         lighter;
@font-weight-light:           300;
@font-weight-normal:          400;
@font-weight-bold:            700;
@font-weight-bolder:          bolder;

@font-weight-base:            @font-weight-normal;
@line-height-base:            1.5;

@text-muted:                  @gray-600;

@dt-font-weight:              @font-weight-bold;


// Tables
// Customizes the `.table` component with basic values, each used across all table variations.

@table-cell-padding:          0.75rem;
@table-cell-padding-sm:       0.3rem;

@table-color:                 @body-color;
@table-bg:                    ~""; // LESS PORT: Sass version uses `null`
@table-accent-bg:             fade(@black, 5%);
@table-hover-color:           @table-color;
@table-hover-bg:              fade(@black, 7.5%);
@table-active-bg:             @table-hover-bg;

@table-border-width:          @border-width;
@table-border-color:          @border-color;

@table-head-bg:               @gray-200;
@table-head-color:            @gray-700;

@table-dark-color:            @white;
@table-dark-bg:               @gray-800;
@table-dark-accent-bg:        fade(@white, 5%);
@table-dark-hover-color:      @table-dark-color;
@table-dark-hover-bg:         fade(@white, 7.5%);
@table-dark-border-color:     lighten(@table-dark-bg, 7.5%);

@table-striped-order:         odd;

@table-caption-color:         @text-muted;

@table-bg-level:              -9;
@table-border-level:          -6;


// Buttons + Forms
// Shared variables that are reassigned to `@input-` and `@btn-` specific variables.

@input-btn-padding-y:         0.375rem;
@input-btn-padding-x:         0.75rem;
@input-btn-font-family:       ~""; // LESS PORT: Sass version uses `null`
@input-btn-font-size:         @font-size-base;
@input-btn-line-height:       @line-height-base;

@input-btn-focus-width:       0.2rem;
@input-btn-focus-color:       fade(@component-active-bg, 25%);
@input-btn-focus-box-shadow:  0 0 0 @input-btn-focus-width @input-btn-focus-color;

@input-btn-padding-y-sm:      0.25rem;
@input-btn-padding-x-sm:      0.5rem;
@input-btn-font-size-sm:      @font-size-sm;
@input-btn-line-height-sm:    @line-height-sm;

@input-btn-padding-y-lg:      0.5rem;
@input-btn-padding-x-lg:      1rem;
@input-btn-font-size-lg:      @font-size-lg;
@input-btn-line-height-lg:    @line-height-lg;

@input-btn-border-width:      @border-width;


// forms

@label-margin-bottom:                   0.5rem;

@input-padding-y:                       @input-btn-padding-y;
@input-padding-x:                       @input-btn-padding-x;
@input-font-family:                     @input-btn-font-family;
@input-font-size:                       @input-btn-font-size;
@input-font-weight:                     @font-weight-base;
@input-line-height:                     @input-btn-line-height;

@input-padding-y-sm:                    @input-btn-padding-y-sm;
@input-padding-x-sm:                    @input-btn-padding-x-sm;
@input-font-size-sm:                    @input-btn-font-size-sm;
@input-line-height-sm:                  @input-btn-line-height-sm;

@input-padding-y-lg:                    @input-btn-padding-y-lg;
@input-padding-x-lg:                    @input-btn-padding-x-lg;
@input-font-size-lg:                    @input-btn-font-size-lg;
@input-line-height-lg:                  @input-btn-line-height-lg;

@input-bg:                              @white;
@input-disabled-bg:                     @gray-200;

@input-color:                           @gray-700;
@input-border-color:                    @gray-400;
@input-border-width:                    @input-btn-border-width;
@input-box-shadow:                      inset 0 1px 1px fade(@black, 7.5%);

@input-border-radius:                   @border-radius;
@input-border-radius-lg:                @border-radius-lg;
@input-border-radius-sm:                @border-radius-sm;

@input-focus-bg:                        @input-bg;
@input-focus-border-color:              lighten(@component-active-bg, 25%);
@input-focus-color:                     @input-color;
@input-focus-width:                     @input-btn-focus-width;
@input-focus-box-shadow:                @input-btn-focus-box-shadow;

@input-placeholder-color:               @gray-600;
@input-plaintext-color:                 @body-color;

@input-height-border:                   (@input-border-width * 2);

@input-height-inner:                    add((@input-line-height * 1em), (@input-padding-y * 2));
@input-height-inner-half:               add((@input-line-height * 0.5em), (@input-padding-y));
@input-height-inner-quarter:            add((@input-line-height * 0.25em), (@input-padding-y / 2));

@input-height:                          add((@input-line-height * 1em), add((@input-padding-y * 2), @input-height-border, false));
@input-height-sm:                       add((@input-line-height-sm * 1em), add((@input-padding-y-sm * 2), @input-height-border, false));
@input-height-lg:                       add((@input-line-height-lg * 1em), add((@input-padding-y-lg * 2), @input-height-border, false));

@input-transition:                      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

@form-text-margin-top:                  0.25rem;
@form-group-margin-bottom:              1rem;

@form-check-inline-margin-x:            0.75rem;
@form-check-inline-input-margin-x:      0.3125rem;

@input-group-addon-color:               @input-color;
@input-group-addon-bg:                  @gray-200;
@input-group-addon-border-color:        @input-border-color;
