// Variable prefix
$variable-prefix: cti- !default;

// Body
// Settings for the `` element.

$body-bg: $white !default;
$body-color: $black !default;
$body-text-align: null !default;

// Isotype image url
$isotype-url: url("/assets/contpaqi/svg/isotype-day.svg") !default;

// Border radius
$border-radius: 10px !default;
$border-color: #f2f2f2 !default;
$border-width: 1px !default;

// Font
$font-family-base: "Open Sans", "Antartida Medium" !default;
$font-size-base: 1rem;
$small-font-size: 0.7rem !default;
$code-font-size: 0.875rem !default;

// Links
$link-color: var(--cti-secondary) !default;
$link-decoration: none !default;
$link-hover-decoration: null !default;
$link-shade-percentage: 20% !default;
$link-hover-color: $link-color !default;

// Alerts
$alert-bg-scale: 0 !default;
$alert-border-scale: 0 !default;
$alert-color-scale: 0 !default;
$alert-border-width: 2px;

// Buttons
$btn-disabled-opacity: 0.38;
$btn-focus-box-shadow: 3px 4px 10px 0 rgba(var(--cti-black), 0.5);
$btn-border-width: $border-width;
$btn-border-radius: $border-radius;

// Forms / Inputs
$input-border-color: var(--cti-secondary-rgb) !default;
$input-border-radius: $border-radius !default;
$input-border-width: $border-width !default;
$input-box-shadow: inset 0px 0px 5px 0px rgba(var(--cti-black-rgb), 0.3) !default;
$input-color: var(--cti-black-rgb) !default;
$input-font-family: "Antartida Light" !default;
$input-font-size: 1rem !default;
$input-height: 30px !default;
$input-padding: 8px 10px 7px 10px !default;
$input-required-color: var(--cti-danger) !default;
$input-icon-color: var(--cti-secondary) !default;
$input-read-only-border-color: rgba(var(--cti-secondary-rgb), 0.5) !default;
$input-check-radio-bg: var(--cti-success) !default;
$input-check-radio-box-shadow: inset 0 1px 10px rgba(var(--cti-black-rgb), 0.2) !default;

$input-select-border-color: #f2f2f2 !default;
$form-select-color: $input-color !default;
$form-select-indicator: url("data:image/svg+xml,") !default;

$form-select-border-width: $input-border-width !default;
$form-select-border-color: rgba($input-border-color, 1) !default;
$form-select-border-radius: $border-radius !default;
$form-select-box-shadow: $input-box-shadow !default;
$form-select-padding: 6px 24px 6px 10px !default;

$form-label-color: var(--cti-black-rgb) !default;
$form-label-bg: var(--cti-body-bg) !default;
$form-label-font-familiy: "Antartida Light" !default;
$form-label-font-size: 1rem !default;
$form-label-font-size-focus: 0.7rem !default;
$form-label-font-weight: normal !default;

// Form validation (errors list)
$form-validation-error-font-family: $font-family-base !default;
$form-validation-error-font-size: 0.75rem !default;
$form-validation-error-font-weight: normal !default;
$form-validation-error-color: black !default;
$form-validation-error-bg: var(--cti-pale-yellow) !default;

// Input help
$form-help-font-family: $font-family-base !default;
$form-help-font-size: 0.7rem !default;
$form-help-font-weight: normal !default;
$form-help-color: var(--cti-black) !default;
$form-help-icon-color: var(--cti-success) !default;

// Modals
$modal-title-font-family: "Geogrotesque Medium" !default;
$modal-title-font-size: 1.25rem !default;
$modal-title-color: var(--cti-primary) !default;
$modal-content-color: var(--cti-black) !default;
$modal-content-border-width: 1px !default;
$modal-content-border-color: var(--cti-secondary) !default;
$modal-content-bg: var(--cti-white) !default;
$modal-backdrop-bg: var(--cti-black) !default;
$modal-backdrop-opacity: 0 !default;
$modal-close-button-color: var(--cti-black) !default;

// Tables
$table-border-color: var(--cti-border-color) !default;

// Progress bar
$progress-height: 1.5rem !default;
$progress-font-size: $font-size-base * 0.75 !default;
$progress-bg: var(--cti-white) !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0px 0px 5px 0px rgba(var(--cti-black-rgb), 0.3) !default;
$progress-bar-color: var(--cti-white) !default;

// Dropdowns
$dropdown-bg: var(--cti-dropdown-bg) !default;
$dropdown-color: var(--cti-black) !default;
$dropdown-link-font-family: "Antartida Light" !default;
$dropdown-link-font-size: 1rem !default;
$dropdown-link-color: $dropdown-color !default;
$dropdown-link-hover-color: $dropdown-color !default;
$dropdown-link-hover-border-color: var(--cti-secondary) !default;
$dropdown-link-active-border: rgba(var(--cti-secondary-rgb), 0.35) !default;

// Cards
$card-bg: var(--cti-card-bg) !default;
$card-color: var(--cti-black) !default;
$card-title-color: rgba(var(--cti-black-rgb), 0.5) !default;
$card-title-font-family: "Antartida Light" !default;
$card-title-font-size: 0.7rem;
$card-icon-color: $card-title-color !default;

// Top navbar
$top-navbar-bg: var(--cti-primary) !default;
$navbar-top-bg: var(--cti-top-navbar-bg) !default;
$navbar-toggler-color: var(--cti-white) !default;

// Sidebar
$sidebar-width: 12.5rem !default;
$sidebar-bg: var(--cti-sidebar-bg) !default;

$sidebar-header-color: var(--cti-primary) !default;

$sidebar-item-color: var(--cti-primary) !default;
$sidebar-item-font-family: "Titillium Web" !default;
$sidebar-item-font-size: 0.875rem !default;
$sidebar-item-font-weight: 300 !default;

$sidebar-item-focus-border-color: rgba(var(--cti-primary-rgb), 0.35) !default;
$sidebar-item-expanded-bg: var(--cti-primary) !default;

$sidebar-submenu-item-hover-bg: rgba(var(--cti-black-rgb), 0.2) !default;

// Tabs
$nav-tabs-bg: var(--cti-nav-tabs-bg) !default;
$nav-tabs-border-color: rgba(var(--cti-secondary-rgb), 0.2) !default;
$nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;

$nav-tabs-link-color: var(--cti-black) !default;
$nav-tabs-link-font-family: $font-family-base !default;
$nav-tabs-link-font-size: 0.875rem;
$nav-tabs-link-font-weight: normal !default;

$nav-tabs-link-active-color: var(--cti-primary) !default;
$nav-tabs-link-hover-color: var(--cti-black) !default;
$nav-tabs-dismiss-color: rgba(var(--cti-black-rgb), 0.5) !default;

// Tooltips
$tooltip-color: var(--cti-white) !default;
$tooltip-bg: var(--cti-black) !default;

// Surface containers
$surface-container-bg: var(--surface-container-bg-default);

// Default component's background
$top-navbar-bg-default: $primary !default;
$dropdown-bg-default: $white !default;
$card-bg-default: $white !default;
$sidebar-bg-default: $white !default;
$nav-tabs-bg-default: $white !default;
$surface-container-bg-default: $white !default;

// Headings
$h1-font-family: 'Geogrotesque Bold' !default;
$h1-alt-font-family: 'Geogrotesque Medium' !default;
$h2-font-family: 'Geogrotesque Medium' !default;
$h2-alt-font-family: 'Geogrotesque Light' !default;
$h3-font-family: 'Titillium Web', sans-serif !default;
$h3-alt-font-family: 'Titillium Web', sans-serif !default;
$h4-font-family: 'Titillium Web', sans-serif !default;
$h4-alt-font-family: 'Titillium Web', sans-serif !default;
$h5-font-family: 'Antartida Medium' !default;

$h1-font-size: 3rem !default;
$h1-alt-font-size: 2.5rem !default;
$h2-font-size: 2rem !default;
$h2-alt-font-size: 2rem !default;
$h3-font-size: 1.5rem !default;
$h3-alt-font-size: 1.5rem !default;
$h4-font-size: 1.25rem !default;
$h4-alt-font-size: 1.25rem !default;
$h5-font-size: 1.25rem !default;

$headings-color: var(--cti-primary) !default;