// layout
$grid-padding = 15px // half gutter

// fonts
$primary-font-family = var(--font-family)
$header-font-family = var(--font-family)
$code-font-family = var(--code-font-family)

// primary palette
$default-color = #ddd
$primary-color = #5f9fd6
$secondary-color = #ed5f82
$highlight-color = #df6589
$code-color = #c92a2a
$text-1-color = #555
$text-2-color = lighten($text-1-color, 15%)
$text-3-color = lighten($text-1-color, 30%)
$header-1-color = #3d3d3d
$header-2-color = lighten($header-1-color, 20%)
$blockquote-color = #999
$page-bg-color = #edf0f2
$content-bg-color = #fff
$border-1-color = $default-color
$border-2-color = lighten($default-color, 20%)

$immersive-primary-color = #ffef87
$immersive-text-color = #ffffff
$immersive-header-color = #ffffff

$success-color = #25ad40
$fail-color = #fb5555
$progress-color = #f39800
$invalid-color = #9fa0a0

// sizes
$font-size = 16px             // main content
$font-size-secondary = 14px   // secondary content
$font-size-small = 13px       // additional informations, usually gray colored
$font-size-icon = 16px
$font-size-title = 20px

// components
$section-gap-v = 15px
$section-gap-h = $grid-padding
$section-list-v = 25px
$section-margin = 30px
$section-shadow = rem(0 6px 22px) rgba(#AFC2C9, 0.5)
$section-bg-color = $content-bg-color
$section-title-color = $header-2-color
$section-toolbtn-color = #AAA
$section-toolbtn-color-hover = #444

$autocomplete-empty-row-color = #AAA
$userselect-uid-color = #BBB

$editor-border-color = $border-1-color

$datepicker-shadow = rem(0 2px 7px) rgba(#000, 0.3)
$datapicker-list-item-bg-color-hover = #F0F0F0

$dialog-layer-bg-color = rgba(#F0F0F0, 0.6)
$dialog-bg-color = $content-bg-color
$dialog-border-color = $border-1-color
$dialog-shadow = rem(0 2px 10px) rgba(#000, 0.2)
$dialog-title-color = $header-2-color

$comment-placeholder-color = #AAA
$comment-op-color = lighten($text-1-color, 30%)
$comment-op-link-color = lighten($text-1-color, 50%)

$menu-item-bg-color-hover = #F4F4F4
$menu-drop-shadow = rem(0 2px 7px) rgba(#000, 0.3)
$menu-drop-bg-color = $content-bg-color
$menu-drop-triangle-size = 4px
$menu-drop-triangle-shadow = rem(-2px -2px 2px) rgba(#000, 0.15)

$nav-item-height = 45px
$nav-item-hover-color = $primary-color
$nav-item-active-color = $secondary-color
$nav-item-active-immersive-color = #9AE3F3
$nav-item-round-height = 32px
$nav-item-round-color = $primary-color
$nav-item-round-border = 2px
$nav-logo-height = 32px
$nav-logo-height-mobile = 23px

$header-layer-height = 100px
$header-bg-width = 1920px
$header-bg-height = 320px
$header-bg-height-mini = $header-bg-height - $header-layer-height
//$header-logo-width = 280px
//$header-logo-height = 150px
//$header-logo-width-real = 280px
//$header-logo-height-real = 150px
$header-logo-width = 252px
$header-logo-height = 150px
$header-logo-width-real = 381px
$header-logo-height-real = 201px
$header-logo-domain-lh = 60px
$header-logo-system-lh = 30px

$footer-bg-color = $content-bg-color

$input-focus-color = #C1E0FF
$form-control-height = 35px
$compact-control-height = 28px
$input-margin = 0 0 1rem
$input-multi-line-margin = 0 0.3rem 0.15rem 0
$input-image-radio-margin = 0 0.3rem 0.3rem 0
$input-background-color = $content-bg-color
$input-border = 1px solid $border-1-color
$input-outline = 2px solid transparent
$input-focus-border-color = $primary-color
$input-focus-outline = 2px solid $input-focus-color
$label-color = lighten($text-1-color, 10%)
$help-text-color = lighten($text-1-color, 30%)

$table-border-color = $border-2-color
$table-alternate-bg-color = #F4F4F4
$table-header-bg-color = rgba(#FFF, 0.95)
$table-header-shadow = rem(0 3px 2px) rgba(#000, 0.03)
$table-header-shadow-floating = rem(0 2px 5px) rgba(#000, 0.2)
$table-padding-h = 10px
$table-lh = 26px

$toolbar-bg = #f2f6f7
$toolbar-fore = #8395a1
$toolbar-fore-hover = #5a6b75
$toolbar-bg-hover = #e3e7e8
$toolbar-fore-selected = #FFF
$toolbar-bg-selected = $secondary-color
$toolbar-disabled-opacity = 0.3

$supplementary-color = lighten($text-1-color, 50%)
$supplementary-border-color = lighten($supplementary-color, 62%)
$supplementary-link-color = lighten($text-1-color, 40%)

$pager-border-color = $table-border-color

$nprogress-color = $primary-color

$syntax-hl-bg-color = #F8F8F8

// Calendar
$calendar-banner-color = {
  '0': #FA6582,
  '1': #EEA9C5,
  '2': #FDB24D,
  '3': #98CA86,
  '4': #7DCBBF,
  '5': #20BDE8,
  '6': #6BCDDB,
  '7': #6598FF,
  '8': #8EB0F5,
  '9': #928FE3,
  '10': #676E7E,
  '11': #A1A5AB,
}

// Notification
$notification-color = {
  'success': #9BDB7B,
  'info': #78D6F4,
  'warn': #FCD279,
  'error': #FD848D,
}

$notification-icon = {
  'success': $icon-check--circle,
  'info': $icon-info--circle,
  'warn': $icon-info--circle,
  'error': $icon-close--circle,
}

// Badge
$badge-text-color = {
  'mod': #FFF,
  'su': #FFF,
  'lv0': #727171,
  'lv1': #FFF,
  'lv2': #FFF,
  'lv3': #FFF,
  'lv4': #FFF,
  'lv5': #FFF,
  'lv6': #FFF,
  'lv7': #FFF,
  'lv8': #FFF,
  'lv9': #FFF,
  'lv10': #FFF,
}
$badge-bg-color = {
  'mod': #cf70ab,
  'su': #ff0000,
  'lv0': #efefef,
  'lv1': #9db4bd,
  'lv2': #9db4bd,
  'lv3': #73c3bc,
  'lv4': #73c3bc,
  'lv5': #81ba6c,
  'lv6': #81ba6c,
  'lv7': #f7b200,
  'lv8': #ff9251,
  'lv9': #eb6363,
  'lv10': #575757,
}

// Record Status
$record-status-color = {
  'pass': $success-color,
  'fail': $fail-color,
  'progress': $progress-color,
  'ignored': $invalid-color,
  'pending': $invalid-color,
}

$record-status-icon = {
  'pass': $icon-check,
  'fail': $icon-close,
  'progress': $icon-hourglass,
  'ignored': $icon-close,
  'pending': $icon-schedule,
}

// Training Status
$training-status-color = {
  'outside': $supplementary-color,
  'progress': #e64c72,
  'done': #25ad40,
}

$training-status-icon = {
  'outside': $icon-help2,
  'progress': $icon-schedule,
  'done': $icon-check,
}

// Training Section Status
$training-section-status-color = {
  'done': #25ad40,
  'open': #e64c72,
  'progress': #e64c72,
  'invalid': $supplementary-color,
}

$training-section-status-icon = {
  'done': $icon-check,
  'open': $icon-help2,
  'progress': $icon-schedule,
  'invalid': $icon-close,
}

// Contest type
// #6EA2C7, #48AAB7, #6BB67A, #F5C735, #DC7D86
$contest-color = {
  'acm': #6BB67A,
  'oi': #F5C735,
  'ioi': #2E9AFE,
  'ledo': #8076A3,
  'homework': #FFCDCD,
  'strictioi': #6EA2C7,
}