/**
 * Dynamic Variables
 */
$primary-color: var(--minimog-color-primary);
$primary-rga-color: var(--minimog-color-primary-rgb);
$secondary-color: var(--minimog-color-secondary);
$third-color: var(--minimog-color-third);
$text-color: var(--minimog-color-text);
$text-bit-lighten-color: var(--minimog-color-text-bit-lighten);
$text-lighten-color: var(--minimog-color-text-lighten);
$text-lighten2-color: #9b9b9b;
$heading-color: var(--minimog-color-heading);
$link-color: var(--minimog-color-link);
$link-hover-color: var(--minimog-color-link-hover);

$body-fill: #EAEAEA;
$box-bg-on-body-fill: #fff; // Box background above body fill.

$body-font-family: var(--minimog-typography-body-font-family);
$body-font-weight: var(--minimog-typography-body-font-weight);
$body-font-size: var(--minimog-typography-body-font-size);
$body-line-height: var(--minimog-typography-body-line-height);

$heading-font-family: var(--minimog-typography-headings-font-family);
$heading-font-weight: var(--minimog-typography-headings-font-weight);
$heading-line-height: 1.3;
$heading-letter-spacing: var(--minimog-typography-headings-letter-spacing);
$heading-text-transform: var(--minimog-typography-headings-text-transform);
$heading-font-weight-secondary: var(--minimog-typography-headings-font-weight-secondary);
$heading-font-weight-bold: 700;

$heading2-font-family: var(--minimog-typography-headings-2-font-family);
$heading2-font-weight: var(--minimog-typography-headings-2-font-weight);
$body-font-weight-medium: 500;
$body-font-weight-semi-bold: 600;
$body-font-weight-bold: 700;

// Form Typography
$form-font-family: var(--minimog-typography-form-font-family);
$form-font-weight: var(--minimog-typography-form-font-weight);
$form-font-size: var(--minimog-typography-form-font-size);

// Form Colors
$form-text: var(--minimog-color-form-text);
$form-border: var(--minimog-color-form-border);
$form-background: var(--minimog-color-form-background);
$form-shadow: var(--minimog-color-form-shadow);
$form-focus-text: var(--minimog-color-form-focus-text);
$form-focus-border: var(--minimog-color-form-focus-border);
$form-focus-background: var(--minimog-color-form-focus-background);
$form-focus-shadow: var(--minimog-color-form-focus-shadow);

// Form
$form-input-small-height: 40px;
$form-input-height: 45px; // Normal height input
$form-input-padding: 18px;

$form-input-border-thickness: var(--minimog-form-input-normal-border-thickness);
// For normal input (Height 45px)
$form-input-rounded: var(--minimog-form-input-normal-rounded);
// For small input (Height 40px)
$form-input-small-rounded: var(--minimog-form-input-small-rounded);
$form-textarea-rounded: var(--minimog-form-textarea-rounded); // 5px

// Button Typography
$button-font-family: var(--minimog-typography-button-font-family);
$button-font-weight: var(--minimog-typography-button-font-weight);
$button-font-size: var(--minimog-typography-button-font-size);
$button-text-transform: var(--minimog-typography-button-text-transform);
$button-letter-spacing: var(--minimog-typography-button-letter-spacing);

// Button Colors
$button-text: var(--minimog-color-button-text);
$button-border: var(--minimog-color-button-border);
$button-background: var(--minimog-color-button-background);
$button-hover-text: var(--minimog-color-button-hover-text);
$button-hover-border: var(--minimog-color-button-hover-border);
$button-hover-background: var(--minimog-color-button-hover-background);

// Button 2 Colors
$button2-text: var(--minimog-color-button2-text);
$button2-border: var(--minimog-color-button2-border);
$button2-background: var(--minimog-color-button2-background);
$button2-hover-text: var(--minimog-color-button2-hover-text);
$button2-hover-border: var(--minimog-color-button2-hover-border);
$button2-hover-background: var(--minimog-color-button2-hover-background);

// Alt Button Colors (Reverse Button Color)
$button-alt-text: var(--minimog-color-button-hover-text);
$button-alt-border: var(--minimog-color-button-hover-border);
$button-alt-background: var(--minimog-color-button-hover-background);
$button-alt-hover-text: var(--minimog-color-button-text);
$button-alt-hover-border: var(--minimog-color-button-border);
$button-alt-hover-background: var(--minimog-color-button-background);

// Sub menu
$sub-menu-background: var(--minimog-color-sub-menu-background);
$sub-menu-border: var(--minimog-color-sub-menu-border);

// Box
$box-white-background: var(--minimog-color-box-white-background);
$box-white-border: var(--minimog-color-box-white-border);
$box-white-border-02: var(--minimog-color-box-white-border-02);
$box-white-border-03: var(--minimog-color-box-white-border-03);
$box-separator: var(--minimog-color-box-fill-separator);

$box-grey-background: var(--minimog-color-box-grey-background);
$box-dark-grey-background: #f5f5f5;
$box-light-grey-background: var(--minimog-color-box-light-grey-background);

$box-border: var(--minimog-color-box-border);
$box-border-lighten: var(--minimog-color-box-border-lighten);

$box-01-text: $primary-color;
$box-01-background: #ffeae3;

$box-02-text: #000;
$box-02-background: #f5f1e9;

// Alert
$success-color: #6cbd7e;
$error-color: #d9534f;
$warning-color: #ff9800;
$info-color: #2196f3;

$danger-color: #dc3131; // Use for delete action or some danger actions.

// Star
$star-full-color: $heading-color;

/**
 * Comment is sample border radius in rounded style.
 */

// For normal button (Height 45px)
$button-rounded: var(--minimog-button-rounded);
// For small button (Height 40px)
$button-small-rounded: var(--minimog-button-small-rounded);
// For large button (Height 60px)
$button-large-rounded: var(--minimog-button-large-rounded);

$box-small-rounded: var(--minimog-small-rounded); // 3px
$box-rounded: var(--minimog-normal-rounded); // 5px
$box-semi-rounded: var(--minimog-semi-rounded); // 8px
$box-large-rounded: var(--minimog-large-rounded); // 10px
