// Variables
//
// Variables should follow the `$component-state-property-size` formula for
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

// Gutters
$gutter-size: 16px !default;

// Grid
$grid-xxl-size: 1320px !default;
$grid-xl-size: 1200px !default;
$grid-lg-size: 992px !default;
$grid-md-size: 768px !default;
$grid-sm-size: 576px !default;

//Spacings
//
// Generate margin & padding mixins, define base spacing size
$spacing-from: 0 !default;
$spacing-to: 30 !default;

$base-size: 32px !default;
$base-size-sm: 24px !default;
$base-size-lg: 40px !default;

// Text colors
$heading-color: #121634 !default;
$text-color: #494f7d !default;
$text-color-secondary: #aaadc9 !default;
$text-color-light: #cfd1e1 !default;

// Background colors
$background-content: #f8f8f8 !default;

// Typography
//
// Font, line-height, and color for body text, headings, and more.
$font-family: 'Roboto', sans-serif !default;
$font-size-base: 14px !default;
$font-size-desktop: 12.5px !default;
$font-size-small-desktop: 10px !default;
$font-size-sm: $font-size-base * 0.875 !default;
$font-size-lg: $font-size-base * 1.25 !default;

$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-medium: 500 !default;
$font-weight-semibold: 600 !default;
$font-weight-bold: 700 !default;

$font-weight-base: $font-weight-normal !default;

$line-height-base: 1.414 !default; // augmented fourth
$line-height-sm: 1.25 !default; // major third
$line-height-lg: 1.618 !default; // golden ratio

$h1-font-size: $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;

// Components
//
// Define common padding and border radius sizes and more.
$border-width: 1px !default;
$border-color: $grey-200 !default;
$border-radius: 4px !default;
$border-radius-sm: $border-radius !default;
$border-radius-lg: $border-radius !default;

// Transitions
//
// Set base time & default base transition
$transition-base: all 0.3s ease-in-out !default;
$transition-time: 0.2s !default;

// Animations
$animation-base: loaderFade $transition-time forwards !default;

// Shadows
//
// Set box shadows
$box-shadow: 0px 4px 8px rgba(18, 22, 52, 0.16) !default;

// Alerts
//Define border
$alert-border: 1px solid $success-color !default;
$alert-border-radius: 4px !default;
$alert-border--info: 1px solid $info-color !default;
$alert-border--warning: 1px solid $warning-color !default;
$alert-border--danger: 1px solid $danger-color !default;
//Define color
$alert-success-color: rgba($success-100, 0.2) !default;
$alert-info-color: rgba($info-100, 0.3) !default;
$alert-warning-color: rgba($warning-100, 0.3) !default;
$alert-danger-color: rgba($danger-200, 0.3) !default;

// Define alert padding & icon size
$alert-icon-size: 20px !default;
$alert-icon-margin: 10px !default;

$alert-padding-y: 20px !default;
$alert-padding-x: 16px !default;

$alert-padding-y-sm: 16px !default;
$alert-padding-x-sm: 14px !default;

$alert-padding-y-lg: 24px !default;
$alert-padding-x-lg: 20px !default;

//Avatars
//
// Define avatar sizes & statuses background
$avatar-size-small: 30px !default;
$avatar-size-big: 60px !default;
$avatar-font-small: 9px !default;
$avatar-font-big: 13px !default;
$avatar-description-color: var(--primary-color) !default;
$avatar-status-active: $success-color !default;
$avatar-status-regular: var(--primary-color) !default;
$avatar-status-uanctive: $success-color !default;
$avatar-short-alt-font-weight: $font-weight-bold !default;
$avatar-inline-alt-font-weight: $font-weight-semibold !default;
$avatar-card-alt-font-weight: $font-weight-medium !default;

// Actions
//
// Customize tooltip, height & icon of actions
$actions-tooltip-height: 250px !default;
$actions-tooltip-min-width: 140px !default;
$actions-tooltip-padding: 0 !default;
$actions-tooltip-title-font-size: 11px !default;
$actions-tooltip-title-padding: 12.5px !default;
$actions-tooltip-title-color: $text-color !default;
$actions-tooltip-item-font-size: 12px !default;
$actions-tooltip-item-padding: $actions-tooltip-title-padding !default;
$actions-border: 1px solid $border-color !default;
$actions-height: 36px !default;
$actions-icon-color: var(--primary-color) !default;
$actions-icon-hover-color: $white !default;

// Badges
//
// Customize size, padding & colors of badge
$badge-size: 20px !default;
$badge-min-size: 30px !default;
$badge-border-radius: 100% !default;
$badge-font-size: 14px !default;
$badge-font-weight: 500 !default;
$badge-padding: 0 !default;
$badge-text-padding: 0 5px !default;
$badge-text-border-radius: $border-radius !default;
$badge-transform: translate3d(50%, -50%, 0) !default;

$badge-regular-bg-color: $white !default;
$badge-success-bg-color: $success-color !default;
$badge-info-bg-color: $info-color !default;
$badge-warning-bg-color: $warning-color !default;
$badge-danger-bg-color: $danger-color !default;

// Card
//
// Style cards elements.
$details-card-padding-size: $gutter-size !default;
$details-card-border: 1px solid !default;
$details-card-border-color: $border-color !default;
$details-card-border-radius: $border-radius !default;
$details-card-header-icon-size: $base-size * 2 !default;
$details-card-header-icon-margin-right: $details-card-padding-size !default;
$details-card-header-border-bottom: 1px solid !default;
$details-card-header-border-bottom-color: $border-color !default;
$details-card-footer-border-top: 1px solid !default;
$details-card-footer-border-top-color: $border-color !default;

// Card
$card-padding-x: 20px !default;
$card-padding-y: 15px !default;
$card-padding-x-sm: 15px !default;
$card-padding-y-sm: 10px !default;
$card-padding-x-lg: 20px !default;
$card-padding-y-lg: 20px !default;

$card-border-radius: $border-radius !default;
$card-border-color: $border-color !default;
$card-bordered-color: var(--primary-color) !default;
$card-header-bg-color: $white !default;
$card-body-bg-color: $grey-100 !default;
$card-footer-bg-color: $white !default;
$card-box-shadow: $box-shadow !default;

// Collapse
$collapse-padding-x: 20px !default;
$collapse-padding-y: 15px !default;
$collapse-padding-x-sm: 15px !default;
$collapse-padding-y-sm: 10px !default;
$collapse-padding-x-lg: 20px !default;
$collapse-padding-y-lg: 20px !default;

$collapse-border-radius: $border-radius !default;
$collapse-border-color: $border-color !default;
$collapse-bordered-color: var(--primary-color) !default;
$collapse-header-bg-color: $white !default;
$collapse-body-bg-color: $grey-100 !default;
$collapse-group-box-shadow: $box-shadow !default;

// Links
//
// Style anchor elements.
$link-color: var(--primary-color) !default;
$link-decoration: none !default;
$link-shade-percentage: 20% !default;
$link-hover-color: var(--primary-600) !default;
$link-hover-decoration: none !default;

// ListGroup
//
// Style list group items
$list-group-background-color: $white !default;
$list-group-border: 1px solid $border-color !default;
$list-group-item-padding: $gutter-size !default;
$list-group-item-border-bottom: 1px solid $border-color !default;

// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
// button medium height = 32px
$btn-padding-y: 5px !default;
$btn-padding-x: 11px !default;

$btn-font-family: $font-family !default;
$btn-font-weight: $font-weight-medium !default;
$btn-font-size: $font-size-base !default;
$btn-line-height: $line-height-base !default;

// button small height = 24px
$btn-padding-y-sm: 3px !default;
$btn-padding-x-sm: 7px !default;
$btn-font-size-sm: $font-size-sm !default;
$btn-font-weight-sm: $font-weight-medium !default;
$btn-line-height-sm: $line-height-sm !default;

// button large height = 40px
$btn-padding-y-lg: 9px !default;
$btn-padding-x-lg: 19px !default;
$btn-font-size-lg: $font-size-base !default;
$btn-font-weight-lg: $font-weight-bold !default;
$btn-line-height-lg: $line-height-base !default;

$btn-border-width: $border-width !default;

$btn-link-color: $link-color !default;
$btn-link-hover-color: $link-hover-color !default;
$btn-link-disabled-color: $grey-500 !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius: $border-radius !default;
$btn-border-radius-sm: $border-radius-sm !default;
$btn-border-radius-lg: $border-radius-lg !default;

$btn-type-ghost-border-color: var(--primary-color) !default;
$btn-type-ghost-background: transparent !default;
$btn-type-ghost-color: var(--primary-color) !default;
$btn-type-ghost-hover-color: $white !default;
$btn-type-ghost-hover-background: var(--primary-color) !default;
$btn-type-ghost-hover-border-color: var(--primary-color) !default;
$btn-type-ghost-active-color: $white !default;
$btn-type-ghost-active-background: var(--primary-600) !default;
$btn-type-ghost-active-border-color: var(--primary-600) !default;
$btn-type-ghost-icon-color: var(--primary-color) !default;

// Layout
//
// Customize layout top bar & toggler & avatar
$layout-top-bar-height: 58px !default;
$layout-top-bar-border-color: 1px solid $border-color !default;
$layout-top-bar-background: $white !default;

$layout-top-bar-side-left-margin-left: $gutter-size !default;
$layout-top-bar-side-right-margin-left: $gutter-size !default;

$layout-top-bar-avatar-background: var(--primary-color) !default;
$layout-top-bar-avatar-color: $white !default;
$layout-top-bar-avatar-alt-color: $text-color !default;
$layout-top-bar-avatar-icon-btn-color: var(--primary-color) !default;
$layout-top-bar-avatar-icon-btn-size: 32px !default;
$layout-top-bar-avatar-icon-btn-padding: 0 !default;

$layout-top-bar-toggler-color: var(--primary-color) !default;
$layout-top-bar-toggler-hover-color: var(--primary-color) !default;
$layout-top-bar-toggler-border-color: $border-color !default;

$layout-content-background: $white !default;

$layout-footer-background: transparent !default;
$layout-footer-height: $layout-top-bar-height !default;
$layout-footer-fixed-border: 1px solid $border-color !default;

// Label
//
// Define font size, color, border of labels
$label-font-size: 12px !default;
$label-height: 24px !default;
$label-padding: 0 12px !default;
$label-color: $text-color !default;
$label-border: 1px solid !default;
$label-border-radius: $border-radius !default;
$label-circle-border-radius: 12px !default;

// Sidebar
//
// Define logo & sidebar width, background, sidebar item
$sidebar-width: 192px !default;
$sidebar-border: 1px solid $border-color !default;
$sidebar-background: $white !default;
$sidebar-bottom-background: $white !default;

$sidebar-item-text-color: $text-color !default;
$sidebar-item-hover-background: var(--primary-color) !default;
$sidebar-item-hover-color: $white !default;
$sidebar-logo-width: $sidebar-width - $gutter-size * 3 !default;

// Table
//
// Customize thead, tbody of table
$table-border: 1px solid $border-color !default;
$table-border-radius: $border-radius !default;
$table-box-shadow: none !default;
$table-body-cell-border: $table-border !default;
$table-body-cell-odd-background: $background-content !default;
$table-body-cell-hover-background: $grey-100 !default;
$table-body-cell-text-align: left !default;
$table-body-cell-justify-content: $table-body-cell-text-align !default;
$table-body-mobile-cell-border: $table-border !default;
$table-head-font-weight: 500 !default;
$table-body-font-size: 10px !default;
$table-head-cell-text-align: left !default;
$table-head-font-size: 13px !default;
$table-head-background: $white !default;
$table-head-cell-border: $table-border !default;
$table-head-cell-bottom-border: 1px solid var(--primary-color) !default;
$table-sub-cell-border: $table-border !default;
$table-font-size: $font-size-base !default;
$table-filter-active-color: $text-color-secondary !default;

// SortBy
//
// Customize height & icon of sortBy
$sort-by-height: 36px !default;
$sort-by-tooltip-height: 250px !default;
$sort-by-icon-color: var(--primary-color) !default;
$sort-by-icon-hover-color: $white !default;
$sort-by-text-color: $text-color !default;
$sort-by-text-hover-color: $white !default;

// Scrollbar
//
// Define base size & colors of scrollbar
$scrollbar-size: 8px !default;
$scrollbar-track-background-color: $background-content !default;
$scrollbar-thumb-background-color: $border-color !default;
$scrollbar-thumb-hover-background-color: var(--primary-color) !default;

// Icon
$icon-svg-color: var(--primary-color) !default;

// Tabs
$tab-item-margin: 0 30px 0 0 !default;
$tab-item-padding: 20px 0 !default;
$tab-border: none !default;
$tab-border-bottom: 1px solid #111 !default;
$tab-item-border-bottom-active: 2px solid var(--primary-color) !default;
$tab-item-disabled-color: $normal-color !default;
$tab-content-padding: 10px !default;

// Form inputs
//
// Define base size & colors of scrollbar
//
// Form fields
$field-margin-bottom: 15px !default;

$field-label-color: $text-color !default;
$field-label-font-size: 12px !default;
$field-label-font-weight: 400 !default;

$field-extra-color: $text-color-secondary !default;

// Input
$input-padding-y: 6px !default;
$input-padding-x: 8px !default;

$input-padding-y-sm: 4px !default;
$input-padding-x-sm: 6px !default;

$input-padding-y-lg: 10px !default;
$input-padding-x-lg: 10px !default;

// Select
$select-padding-y: $input-padding-y !default;
$select-padding-x: $input-padding-x !default;

$select-padding-y-sm: $input-padding-y-sm !default;
$select-padding-x-sm: $input-padding-x-sm !default;

$select-padding-y-lg: $input-padding-y-lg !default;
$select-padding-x-lg: $input-padding-x-lg !default;

$select-padding-prefix-y: $input-padding-y !default;
$select-padding-prefix-x: $input-padding-x !default;

$select-prefix-border-right: 1px solid $border-color;

// Calendar
$calendar-padding-y: $input-padding-y !default;
$calendar-padding-x: $input-padding-x !default;

$calendar-padding-y-sm: $input-padding-y-sm !default;
$calendar-padding-x-sm: $input-padding-x-sm !default;

$calendar-padding-y-lg: $input-padding-y-lg !default;
$calendar-padding-x-lg: $input-padding-x-lg !default;

// Notify
$notify-box-shadow: $box-shadow !default;
$notify-width: auto !default;
$notify-color: $white !default;
$notify-padding: $gutter-size !default;
$notify-border-radius: $border-radius !default;
