//-----------------------------------------------------------------------------------------//
// Utilities
//-----------------------------------------------------------------------------------------//

@function arr1($arr,$index){
  @return nth($arr,$index + 1);
}

//-----------------------------------------------------------------------------------------//
// Shared
//-----------------------------------------------------------------------------------------//

$default-font-family: Arial,sans-serif;
$default-text-shadow: 1px 1px #000;
$default-border-radius: 2px;

$color:
  #1A1A1A,
  #343434,
  #2E2E2E,
  #262626,
  #000;

$label-font-size: 11px;
$label-font-weight: bold;
$label-text-shadow: 0 1px #000;

//-----------------------------------------------------------------------------------------//
// Comps
//-----------------------------------------------------------------------------------------//

// panel base
$panel-width : 200px;
$panel-background: arr1($color,0);
$panel-border-radius: 3px;
$panel-box-shadow:  0 2px 2px rgba(0, 0, 0, 0.25);
$panel-font-family: $default-font-family;
// panel head
$panel-head-background: arr1($color, 0);
$panel-head-height: 30px;
$panel-head-padding: 0 10px 0 10px;
$panel-head-border-top: 1px solid #202426;
$panel-head-label-color: #65696b;

//-----------------------------------------------------------------------------------------//
// Component
//-----------------------------------------------------------------------------------------//

// base
$component-width: 70%;
$component-height: 25px;
$component-padding: 5px 0 0 0;
$component-border-bottom: 1px solid #3b4447;
$component-border-radius: $default-border-radius;
$component-border-color: #1F1F1F;
$component-inset-border: 0 0 0 1px $component-border-color inset;
$component-inset-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.0125);
$component-font-family: $default-font-family;
$component-font-size: 11px;
//label
$component-label-width: 30%;
$component-label-padding: 12px 5px 0 0;
$component-label-font-size: $component-font-size;
$component-label-font-weight: normal;
$component-label-color: #aeb5b8;
$component-label-text-shadow: $default-text-shadow;

//-----------------------------------------------------------------------------------------//
// Menu
//-----------------------------------------------------------------------------------------//

// base
$menu-padding: 5px 0 0 0;
// button
$menu-button-width: 20px;
$menu-button-height: 20px;
$menu-button-margin-left: 4px;
$menu-button-border-radius: $component-border-radius;
$menu-button-background: #1a1d1f;
$menu-button-box-shadow:  (0 0 0 1px #131313 inset,-1px 2px 0 0 #212527 inset);
$menu-button-border-bottom: 1px solid #24292b;
$menu-button-gradient: rgb(26, 29, 31) 0%, rgb(26, 29, 31) 100%;
$menu-button-font-family: $default-font-family;
$menu-button-font-size: 10px;
$menu-button-font-weight: bold;
$menu-button-color: #aaaaaa;
$menu-button-text-shadow:  0 -1px #000;
$menu-button-text-transform: uppercase;
// button hover
$menu-button-hover-background: #000000;
$menu-button-hover-gradient: #fff 0%, #000 100%;
// button undo
$menu-buttonUndo-padding: 0 6px 1px 0;
$menu-buttonUndo-width: 38px;

//-----------------------------------------------------------------------------------------//
// Group
//-----------------------------------------------------------------------------------------//

// base
$group-head-height: 38px;
$group-head-padding: 0 10px 0 10px;
$group-head-border-top: 1px solid #4f4f4f;
$group-head-border-bottom: 1px solid #262626;
$group-head-gradient: #454545 0%, #3b3b3b 100%;
// label
$group-head-label-font-size: 12px;
$group-head-label-color: #fff;
// hover
$group-head-hover-border-top: 1px solid #525252;
$group-head-hover-gradient: #454545 0%, #404040 100%;

//-----------------------------------------------------------------------------------------//
// Group
//-----------------------------------------------------------------------------------------//

$subGroupList-item-height: 35px;
$subGroupList-item-border-bottom: 1px solid #222729;
$subGroupList-item-padding: 0 10px 0 10px;
$subGroupList-item-background: #2e2e2e;
// base
$subGroup-margin-top : 6px;
$subGroup-border: 1px solid #242424;
$subGroup-border-radius: $default-border-radius;
$subGroup-box-shadow: 0 1px 0 0 rgba(59,68,71,1.0);
// head
$subGroup-head-height: 27px;
$subGroup-head-padding: 0 10px 0 10px;
$subGroup-head-inset-top: 1px solid #1e2224;
$subGroup-head-border-bottom: 1px solid #1e2224;
$subGroup-head-border-top-radius: $default-border-radius;
$subGroup-head-background: #272727;
// head - hover
$subGroup-head-hover-background: #272727;
// head - inactive
$subGroup-head-inactive-box-shadow: 0 1px 0 0 #404040 inset;
$subGroup-head-inactive-gradient: #3b3b3b 0%, #383838 100%;
$subGroup-head-inactive-hover-box-shadow: 0 1px 0 0 #474747 inset;
$subGroup-head-inactive-hover-gradient: #404040 0%, #3B3B3B 100%;
// head - label
$subGroup-head-label-color: #fff;
$subGroup-head-label-font-weight: bold;
$subGroup-head-label-font-size: 11px;
$subGroup-head-label-text-shadow: $default-text-shadow;
$subGroup-head-label-text-transform: capitalize;

//-----------------------------------------------------------------------------------------//
// Input
//-----------------------------------------------------------------------------------------//

$input-height: $component-height;
$input-padding: 0 0 0 8px;
$input-box-shadow: 0 0 1px 2px rgba(0,0,0,0.0125) inset, 0 0 1px 1px #111314 inset;
$input-color: #fff;
$input-font-size: 11px;
$input-text-shadow: $default-text-shadow;
$input-font-family: $default-font-family;
$input-background: #222729;
$input-gradient: rgba(0,0,0,0.075) 0%, rgba(0,0,0,0.125) 100%;
$input-top-color: rgba(0,0,0,0.0125);
$input-border-radius: $default-border-radius;

//-----------------------------------------------------------------------------------------//
// Textarea
//-----------------------------------------------------------------------------------------//

//base
$textarea-padding: 5px 8px 2px 8px;
//wrap
$textarea-wrap-border-radius: $input-border-radius;
$textarea-wrap-box-shadow: $input-box-shadow;
$textarea-wrap-gradient: $input-gradient;
$textarea-wrap-background: $input-background;
//wrap-scrollbar
$textarea-wrap-scrollBar-border: 1px solid #101213;
$textarea-wrap-scrollBar-border-radius: $default-border-radius;

//-----------------------------------------------------------------------------------------//
// Range
//-----------------------------------------------------------------------------------------//
$range-label-padding: 8px 0 0 0;
$range-label-color: #878787;
$range-label-text-align: center;
$range-label-text-transform: uppercase;
$range-label-font-size: 10px;
$range-label-font-weight: bold;
$range-label-text-shadow: 1px 1px #1a1a1a;

//-----------------------------------------------------------------------------------------//
// Button
//-----------------------------------------------------------------------------------------//
// base
$button-height: 26px;
$button-margin: 0;
$button-border-radius: $default-border-radius;
$button-background: #00ff00;
$button-color: #fff;
$button-font-family: $default-font-family;
$button-font-size: 10px;
$button-font-weight: bold;
$button-text-shadow: 0 1px #000;
$button-text-transform: uppercase;
$button-box-shadow: 0 0 0 1px $component-border-color inset, -1px 2px 0 0 #4a4a4a inset;
$button-gradient: #404040 0%, #3b3b3b 100%;
// active
$button-active-gradient: $button-gradient;
// hover
$button-hover-bevel-top: -1px 2px 0 0 #fff inset;
$button-hover-gradient: #454545 0%, #3b3b3b 100%;

//-----------------------------------------------------------------------------------------//
// Button Preset
//-----------------------------------------------------------------------------------------//

// base
$button-preset-width: 20px;
$button-preset-height: $input-height;
$button-preset-box-shadow: 0 1px 0 0 #fff inset;
$button-preset-border-left: 1px solid $component-border-color;
$button-preset-gradient: $button-gradient;
// hover
$button-preset-hover-gradient: $button-hover-gradient;

//-----------------------------------------------------------------------------------------//
// Select
//-----------------------------------------------------------------------------------------//

$select-gradient: $button-gradient;
$select-hover-gradient: $button-hover-gradient;

//-----------------------------------------------------------------------------------------//
// Slider
//-----------------------------------------------------------------------------------------//

// base
$slider-width: $component-width;
$slider-height: $component-height;
$slider-padding: 3px;
// slot
$slider-slot-border: none;
$slider-slot-border-radius: $default-border-radius;
$slider-slot-background: #1e2224;
// handle
$slider-handle-background:#b32435;
$slider-handle-gradient: rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%;
$slider-handle-box-shadow: 0 1px 0 0 #0f0f0f;

/*-------------------------------------------------------------------------------------
 * Options
 *-------------------------------------------------------------------------------------*/

$options-border: 1px solid #1F1F1F;
$options-border-radius: 2px;
$options-font-family: $default-font-family;
$options-text-shadow: $default-text-shadow;
$options-color: #fff;
$options-font-size: 11px;
$options-box-shadow: 0 1px 0 0 #4a4a4a inset;
$options-background: #454545;

$optionsList-item-height:              25px;
$optionsList-item-padding:             0 20px 0 10px;
$optionsList-item-hover-background:    #1f2325;
$optionsList-item-selected-background: #292d30;

//-----------------------------------------------------------------------------------------//
// Canvas & SVG
//-----------------------------------------------------------------------------------------//

$canvas-wrap-margin: 6px 0 0 0;
$canvas-wrap-border-radius: $default-border-radius;
$canvas-wrap-background: #1e2224;
$canvas-wrap-gradient: rgba(0,0,0,0) 0%,rgba(0,0,0,0.05) 100%;

//-----------------------------------------------------------------------------------------//
// ScrollBar
//-----------------------------------------------------------------------------------------//

// base
$scrollBar-width: 15px;
$scrollBar-background: #212628;
$scrollBar-gradient: #242424 0%, #2E2E2E 100%;
// track
$scrollBar-track-padding: 0 3px 0 2px;
// thumb
$scrollBar-thumb-width: 11px;
$scrollBar-thumb-border-radius: 10px;
$scrollBar-thumb-background: #343434;
$scrollBar-thumb-gradient: #2E2E2E 0%,#2E2E2E 100%;
$scrollBar-thumb-border: 1px solid #1b1f21;
$scrollBar-thumb-box-shadow: inset 0 1px 0 0 #434b50;
// buffer
$scrollBuffer-height: 8px;
$scrollBuffer-border-top: 1px solid #3b4447;
$scrollBuffer-border-bottom: 1px solid #1e2224;

//-----------------------------------------------------------------------------------------//
// Picker
//-----------------------------------------------------------------------------------------//

// panel
$picker-panel-width: 360px;
$picker-panel-border-radius: $panel-border-radius;
$picker-panel-background: #343434;
$picker-panel-font-family: $default-font-family;
$picker-panel-font-size: 11px;
$picker-panel-color: #fff;
$picker-panel-text-shadow: $default-text-shadow;
$picker-panel-padding: 10px;
// wraps
$picker-field-wrap-padding: 3px;
$picker-slider-wrap-padding: 3px 13px 3px 3px;
// input wrap
$picker-input-wrap-border: $subGroup-border;
$picker-input-wrap-border-radius: $subGroup-border-radius;
$picker-input-wrap-width: 140px;
$picker-input-wrap-padding: 5px 10px 1px 0;
// input
$picker-input-field-width: 50%;
$picker-input-field-margin-bottom: 4px;
$picker-input-field-ratio-label: 40%;
$picker-input-field-ratio-wrap:  60%;
// controls wrap
$picker-controls-wrap-padding: 9px 0 0 0;
// controls
$picker-control-button-width: 65px;
$picker-control-button-margin: 0 0 0 10px;
// color contrast
$picker-color-contrast-height: $component-height;
$picker-color-contrast-padding: 3px;
$picker-color-contrast-width: 80%;
$picker-color-contrast-margin-bottom: 4px;
// indicator
$picker-indicator-color: #fff;
$picker-indicator-border: 2px solid $picker-indicator-color;
$picker-indicator-box-shadow: 0 1px #000, 0 1px #000 inset;
$picker-indicator-field-size: 8px;
// indicator slider
$picker-indicator-slider-width: 14px;
$picker-indicator-slider-height: 3px;
$picker-indicator-slider-arrow-width: 4px;
$picker-indicator-slider-arrow-height: 9px;
$picker-indicator-slider-arrow-top: -2px;
$picker-indicator-slider-arrow-left: 19px;