// $theme-dir := '../../styles/themes/ksyun'
use('../../functions.js')

if lookup('$theme-dir') 
    push($theme-dir, __dirname())
else
    $theme-dir = __dirname()

$rem := 16

// we must require other file after defined $theme-dir
// otherwise, the __dirname may be weird
@require('../../mixin.styl')

$light-black := #737373

$primary-color := #0091ea
$warning-color := #ffad37
$danger-color := #ff4433
$success-color := #36b342
$disabled-color := #ccc
$disabled-bg-color := #f2f2f2
$disabled-border-color := #ccc
$text-color := #4c4c4c
$ghost-text-color := $light-black
$border-color := #ccc
// $border-color := #b2b2b2
$bg-color := #f1f1f5
$title-color := #333
$dark-border-color := #b2b2b2
$placeholder-color := #b2b2b2

$box-shadow := 0 0 4px 0 rgba(0, 0, 0, .3)

$link-color := $primary-color
$link-hover-color := palette($link-color, -1)

$line-height := 1.5
$font-size := 12px

/**
 * size
 */
$large-height := 40
$large-font-size := 14px
$large-padding := 24
$default-height := 32 
$default-font-size := 12px
$default-padding := 16
$small-height := 24 
$small-font-size := 12px
$small-padding := 8
$mini-height := 16 
$mini-font-size := 12px
$mini-padding := 8

// the gutter between icon and text
$icon-text-gutter := 8

/**
 * btn
 */
$btn-color := $text-color 
// type
// $btn-primary-border-color := palette($primary-color, 1) 
// $btn-warning-border-color := palette($warning-color, 1)
// $btn-danger-border-color := palette($danger-color, 1)
// $btn-success-border-color := palette($success-color, 1)
// $btn-hover-border-color := palette($primary-color, 1)
$btn-primary-hover-border-color := palette($primary-color, -1)
$btn-warning-hover-border-color := palette($warning-color, -1)
$btn-danger-hover-border-color := palette($danger-color, -1)
$btn-active-hover-border-color := palette($primary-color, -1)
$btn-success-hover-border-color := palette($success-color, -1)
$btn-active-color := $primary-color
// $btn-active-border-color := palette($primary-color, 1)
$btn-active-bg-color := palette($primary-color, -4)


/**
 * radio
 */
$radio-width := 14px
$radio-inner-width := 8px
$radio-disabled-inner-color := $disabled-border-color


/**
 * checkbox
 */
$checkbox-inner-border := 1px solid #fff
$checkbox-inner-width := 5px
$checkbox-inner-height := 10px
$checkbox-inner-top := -1px 
$checkbox-disabled-inner-color := $disabled-border-color
$checkbox-indeterminate-inner-left := 3px 

/**
 * switch
 */
$switch-bg-color := #fff
$switch-checked-bg-color := #fff
$switch-color := $text-color
$switch-handle-bg-color := $border-color
// disabled
$switch-disabled-bg-color := $disabled-bg-color

$switch-default-height := 18px
$switch-default-width := 36px
$switch-default-padding := 2px

$switch-large-height := 26px
$switch-large-width := 52px

$switch-small-height := 16px
$switch-small-width := 32px


/**
 * input
 */
$input-padding-left-right := unit($default-padding, px)
$input-group-bg-color := $bg-color
$input-group-padding-horizontal := unit(16 / $rem, em)
// $input-large-padding-left-right := unit($large-padding, px)
$input-small-padding-left-right := unit($small-padding, px)
$input-mini-padding-left-right := unit($mini-padding, px)
$search-input-suffix-margin-right := 15px 


/**
 * select
 */
$select-width := 300px
$select-icon-width := 13px

$select-padding-left-right := unit($default-padding, px)
// $select-large-padding-left-right := unit($large-padding, px)
$select-small-padding-left-right := unit($small-padding, px)
$select-mini-padding-left-right := unit($mini-padding, px)

$select-multiple-values-margin := 4px
$select-multiple-tag-padding := 3px 8px 4px 8px
$select-multiple-tag-margin := 0 8px 3px 0
$select-multiple-tag-delete-icon-margin-left := 8px 
$select-multiple-tag-bg-color := $bg-color
$select-multiple-tag-delete-icon-font-size := 14px
$select-large-font-size := 14px

$select-group-label-color := $placeholder-color
$select-group-label-padding := 10px 16px



/**
 * dialog
 */
$dialog-padding := 0
$dialog-font-size := 12px
$dialog-title-height := 61px
$dialog-title-font-size := 16px
$dialog-title-border := 1px solid #eaeaea
$dialog-close-top := 16px
$dialog-close-right := -9px
$dialog-close-icon-font-size := 44px
$dialog-body-padding := 20px
$dialog-footer-padding := 20px 0
$dialog-alert-padding := 0 20px
$dialog-alert-title-font-size := 14px
$dialog-alert-tip-icon-font-size := 37px 


/**
 * table
 */
$table-border-color := #e5e5e5 
$table-thead-bg-color := $bg-color
$table-th-padding := 0 5px 0 12px
$table-thead-font-size := 12px
$table-th-font-weight := bold
$table-thead-color := $text-color
$table-tr-hover-bg-color := $bg-color
$table-border-thead-bg-color := $table-thead-bg-color
$table-fixed-margin-top := -31px
$table-check-width := 40px

/**
 * slider
 */
$slider-height := 4px
$slider-bg-color := #e5e5e5
$slider-border-radius := 2px
$slider-handle-height := 12px
$slider-handle-width := 12px
$slider-handle-hover-bg-color := #fff
$slider-spinner-width := 124px
$slider-box-padding := 10px 0 0


/**
 * message
 */
$message-bg-color := $bg-color
$message-box-shadow := none
$message-content-padding := 7px 33px 7px 8px
$message-close-font-size := 26px
$message-icon-color := inherit
$message-icon-font-size := 16px
$message-icon-top := 5px


/**
 * tooltip
 */
$tooltip-padding := 8px 12px
$tooltip-color := $text-color
$tooltip-arrow-border-color := rgba(191, 191, 191, .5)


/**
 * pagination
 */
$pagination-btn-border-radius := 0
$pagination-gutter := 16px
$pagination-btn-margin-right := 6px
$pagination-large-btn-margin-right := 8px
$pagination-small-btn-margin-right := 4px
$pagination-mini-btn-margin-right := 2px


/**
 * steps
 */
$steps-bg-color := $bg-color
$steps-head-color := inherit
$steps-head-inner-border := 1px solid $placeholder-color
$steps-head-inner-width := 16px
$steps-main-title-font-weight := normal
$steps-main-color := $text-color
// $steps-done-head-color := #fff
// $steps-active-head-inner-border-color := $warning-color
// $steps-active-head-inner-bg-color := $warning-color
$steps-active-main-color := $primary-color
$steps-line-tail-bg-color := $placeholder-color
$steps-simple-head-font-weight := normal


/**
 * tabs
 */
// $tabs-height := unit($default-height, px)
// $tabs-padding := 0 16px
// $tabs-vertical-padding := $tabs-padding
// $tabs-border-bottom := 1px solid $disabled-border-color
// $tabs-height := 50px
// $tabs-padding := 0 37px 
// $tabs-margin := 0
// $tabs-highlight-bg-color := #fff


/**
 * breadcrumb
 */
$breadcrumb-font-size := 14px
$breadcrumb-active-font-weight := normal
$breadcrumb-separator-margin := 0 6px
$breadcrumb-hover-color := $primary-color
$breadcrumb-color := $light-black
$breadcrumb-active-color := #262626


/**
 * transfer
 */
// $transfer-panel-border := 1px solid $disabled-border-color
// $transfer-panel-width := 200px
// $transfer-arrow-margin := 16px 30px


/**
 * dropdown
 */
$dropdown-item-hover-bg-color := $bg-color
$dropdown-item-hover-color := inherit 


/**
 * progress
 */


/**
 * tag
 */
// $tag-color := $ghost-text-color
$tag-border-color := $placeholder-color
$tag-padding := unit(6 / $rem, rem) unit($default-padding / $rem, rem)
$tag-closable-padding-right := unit(30 / $rem, rem)
$tag-large-padding := unit(9 / $rem, rem) unit($large-padding / $rem, rem)
$tag-small-padding := unit(2 / $rem, rem) unit($small-padding / $rem, rem)
$tag-mini-padding := 0 unit($mini-padding / $rem, rem)
$tag-mini-closable-padding-right := unit($mini-height / $rem, rem)

/**
 * tip
 */
$tip-title-font-size := 14px
$tip-title-margin-bottom := 8px

/**
 * tree
 */
$tree-font-size := 12px
$tree-icon-color := $placeholder-color
$tree-line-height := 24px

/**
 * timeline
 */
$timeline-font-size := 12px

/**
 * menu
 */
$menu-light-item-disabled-color := #999

/**
 * card
 */
$card-header-font-size := unit(14 / $rem, rem)

@require('../default.styl')