@import "../bootstrap/variables.less";

@icon-font-path: "../../fonts/";
@icon-font-name: "toolkit-entypo";

@gray-base:              #000;
@gray-dark:              #222;
@gray-darker:            #111;
@gray:                   #555;
@gray-light:             #aaa;
@gray-lighter:           #f5f5f5;
@gray-subtle:            #eee;

@brand-primary:          #1CA8DD;
@brand-success:          #1BC98E;
@brand-info:             #9F86FF;
@brand-warning:          #E4D836;
@brand-danger:           #E64759;


// States
//
// Overrides Bootstrap defaults.

@state-success-text:             @brand-success;
@state-info-text:                @brand-info;
@state-warning-text:             @brand-warning;
@state-danger-text:              @brand-danger;


// Spacing
//
// Custom variables. Utilities for quickly spacing items consistently.

@spacer:   20px;
@spacer-x: @spacer;
@spacer-y: @spacer;

// Breakpoints
//

@grid-float-breakpoint:     @screen-md-min;


// Typography
//
// Overrides Bootstrap defaults.

// Fonts
@font-family-sans-serif:  "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

// Body
@font-weight-base:        300;
@letter-spacing-base:     0;
@line-height-base:        1.5;
@text-color:              @gray;

// Lead
@lead-font-size:      floor((@font-size-base * 1.15));
@lead-font-size-sm:   floor((@font-size-base * 1.5));
@lead-font-weight:    inherit;
@lead-line-height:    1.4;
@lead-letter-spacing: 0;

// Headings
@headings-font-weight:    300;
@headings-color:          inherit;

@text-muted:              #999;
@hr-border:               @gray-subtle;


// Forms
//
// Overrides Bootstrap defaults.

@input-border:                   #d5d5d5;
@input-border-focus:             @brand-primary;


// Buttons
//
// Overrides and custom.

// Custom
@btn-font-size:      @font-size-base;
@btn-text-transform: none;
@btn-letter-spacing: normal;

// Overrides
@btn-font-weight:                normal;
@btn-default-color:              @gray-darker;
@btn-default-bg:                 @gray-lighter;
@btn-default-border:             darken(@btn-default-bg, 10%);

@btn-toolbar-divider-bg:         #eee;


// Badges
//
// Overrides Bootstrap defaults.

@badge-color:                 #fff;


// Alerts
//
// Overrides Bootstrap defaults.

@alert-success-bg:            @brand-success;
@alert-success-text:          lighten(@brand-success, 50%);
@alert-success-border:        @alert-success-bg;

@alert-info-bg:               @brand-info;
@alert-info-text:             lighten(@brand-info, 50%);
@alert-info-border:           @alert-info-bg;

@alert-warning-bg:            @brand-warning;
@alert-warning-text:          lighten(@brand-warning, 50%);
@alert-warning-border:        @alert-warning-bg;

@alert-danger-bg:             @brand-danger;
@alert-danger-text:           lighten(@brand-danger, 45%);
@alert-danger-border:         @alert-danger-bg;


// Panels
//
// Overrides Bootstrap defaults.

@panel-success-text:          #fff;
@panel-success-border:        @state-success-text;
@panel-success-heading-bg:    @state-success-text;

@panel-info-text:             #fff;
@panel-info-border:           @state-info-text;
@panel-info-heading-bg:       @state-info-text;

@panel-warning-text:          #fff;
@panel-warning-border:        @state-warning-text;
@panel-warning-heading-bg:    @state-warning-text;

@panel-danger-text:           #fff;
@panel-danger-border:         @state-danger-text;
@panel-danger-heading-bg:     @state-danger-text;


// Navs
//
// Overrides Bootstrap defaults.

@nav-link-padding:               7px 15px;

@nav-bordered-color:              #777;
@nav-bordered-color-active:       #777;
@nav-bordered-font-weight:        300;
@nav-bordered-font-weight-active: 500;

@nav-link-hover-bg: lighten(@brand-primary, 45%);

@nav-header-color: lighten(@gray, 35%);

// Navbar
//
// Overrides Bootstrap defaults.

@navbar-inverse-bg: @gray-darker;


// Thumbnail
//
// Overrides Bootstrap defaults.

@thumbnail-caption-padding:   15px 11px;


// Icon nav
//
// Custom variables. Built for the icon nav example.

@iconav-bg:                  @gray-subtle;
@iconav-border:              #fff;
@iconav-width:               70px;
@iconav-brand-color:         inherit;
@iconav-brand-hover-color:   inherit;
@iconav-brand-bg:            @gray-dark;
@iconav-brand-border:        @iconav-border;
@iconav-link-color:          @gray-dark;
@iconav-link-border:         @iconav-border;
@iconav-link-active-color:   @gray;
@iconav-link-active-bg:      @iconav-border;

@list-group-bg: transparent;
@list-group-header-color: inherit;

@statlist-border-color: #e5e5e5;
@statlist-link-color:   inherit;
@statlist-progress-bg:  #f5f5f5;

@hr-divider-content-color:  @gray;
@hr-divider-content-bg:     @body-bg;
@hr-divider-before-bg:      @gray-subtle;

@custom-select-color:       @input-color;
@custom-select-bg:          @input-bg;
@custom-select-disabled-bg: @input-bg-disabled;

@custom-control-indicator-bg:     @input-bg;
@custom-control-indicator-border: rgba(0,0,0,.15);

@custom-control-indicator-checked-bg:      @brand-primary;
@custom-control-indicator-checked-border:  @brand-primary;
@custom-control-indicator-active-bg:       lighten(@brand-primary, 15%);
@custom-control-indicator-active-border:   lighten(@brand-primary, 15%);
@custom-control-indicator-disabled-bg:     darken(@input-bg, 5%);
@custom-control-indicator-disabled-border: @custom-control-indicator-border;

@sidebar-brand-color:          @gray;
@sidebar-brand-hover-color:    @gray-dark;
@sidebar-toggler-color:        #ccc;
@sidebar-toggler-hover-color:  #fff;

@dashhead-toolbar-divider-bg: #eee;
@dashhead-subtitle-color: @nav-header-color;

@well-border: rgba(0,0,0,.1);

@nav-pills-active-weight: 500;
@navbar-nav-active-font-weight: 500;



// Gray scale
@gray-base:    #252830;
@gray-darker:  lighten(@gray-base, 13.5%);
@gray-dark:    lighten(@gray-base, 20%);
@gray:         lighten(@gray-base, 33.5%);
@gray-light:   lighten(@gray-base, 66.7%);
@gray-lighter: lighten(@gray-base, 93.5%);

// reset gray subtle
@gray-subtle: @gray-light;

// Scaffolding
@body-bg:           @gray-base;
@text-color:        @gray-light;
@btn-default-color: @gray-dark;

// Typography
@headings-color:                 @gray-lighter;
@code-bg:                        darken(@gray-base, 5%);
@blockquote-border-color:        @gray-darker;
@page-header-border-color:       @gray-darker;
@hr-border:                      @gray-darker;

// Tables
@table-bg-accent:                @gray-darker;
@table-border-color:             @gray-darker;
@table-bg-hover:                 @gray-darker;

// Forms
@input-bg:                       @gray-darker;
@input-bg-disabled:              lighten(@gray-base, 5%);
@input-color:                    #fff;
@input-border:                   @gray-darker;
@input-border-focus:             #fff;
@input-group-addon-bg:           lighten(@gray-base, 18%);
@input-group-addon-border-color: transparent;
@input-color-placeholder:        @gray-light;

// Thumbnails
@thumbnail-bg:                   transparent;
@thumbnail-border:               lighten(@gray-base, 5%);
@thumbnail-caption-color:        inherit;

// Jumbotron
@jumbotron-bg:                   darken(@gray-base, 5%);
@jumbotron-heading-color:        #fff;

// Badges
@badge-color:                    @gray-base;

// Progress bars
@progress-bg:                    @gray-darker;

// Navs
@nav-link-hover-bg:                         @gray-darker;
@nav-pills-active-link-hover-color:         @body-bg;
@nav-pills-active-link-hover-bg:            @brand-primary;
@nav-tabs-border-color:                     @gray-darker;
@nav-tabs-active-link-hover-color:          @component-active-color;
@nav-tabs-active-link-hover-bg:             transparent;
@nav-tabs-active-link-hover-border-color:   @nav-tabs-border-color;

// Inverted navbar
@navbar-inverse-color:                      @gray-light;
@navbar-inverse-bg:                         darken(@gray-base, 5%);
@navbar-inverse-border:                     darken(@gray-base, 5%);
@navbar-inverse-link-color:                 @gray-light;
@navbar-inverse-link-hover-color:           #fff;
// @navbar-inverse-link-hover-bg:              transparent;
@navbar-inverse-link-active-color:          @component-active-color;
@navbar-inverse-link-active-bg:             transparent;
@navbar-inverse-link-disabled-color:        @gray-dark;
// @navbar-inverse-link-disabled-bg:           transparent;
@navbar-inverse-brand-color:                @gray-light;
@navbar-inverse-brand-hover-color:          #fff;
@navbar-inverse-brand-hover-bg:             transparent;
@navbar-inverse-toggle-hover-bg:            @gray-base;
@navbar-inverse-toggle-icon-bar-bg:         #fff;
@navbar-inverse-toggle-border-color:        transparent;

// Pagination
@pagination-color:                     @gray-dark;
@pagination-bg:                        @body-bg;
@pagination-border:                    @gray-darker;

@pagination-hover-color:               #fff;
@pagination-hover-bg:                  @gray-darker;
@pagination-hover-border:              @pagination-hover-bg;

@pagination-active-color:              @component-active-color;
@pagination-active-bg:                 @gray-dark;
@pagination-active-border:             @gray-dark;

@pagination-disabled-color:            @gray-dark;
@pagination-disabled-bg:               transparent;
@pagination-disabled-border:           @gray-darker;

// Breadcrumbs
@breadcrumb-bg:                        lighten(@gray-base, 5%);
@breadcrumb-color:                     @gray-dark;
@breadcrumb-active-color:              @component-active-color;

// List groups
@list-group-bg:                        transparent;
@list-group-border:                    @gray-darker;
@list-group-hover-bg:                  @gray-darker;
@list-group-link-color:                @gray-light;
@list-group-link-hover-color:          @gray-light;
@list-group-link-heading-color:        @gray-light;
@list-group-active-color:              @component-active-color;
@list-group-active-bg:                 @gray-dark;
@list-group-active-border:             @gray-dark;
@list-group-active-text-color:         lighten(@list-group-active-bg, 40%);
@list-group-disabled-color:            @gray-dark;
@list-group-disabled-bg:               transparent;
@list-group-disabled-text-color:       inherit;

// Panels
@panel-bg:                             transparent;

// Wells
@well-bg:                              lighten(@gray-base, 5%);
@well-border:                          @gray-darker;

// Tooltips
@tooltip-arrow-color: #fff;

@thumbnail-bg: transparent;
@thumbnail-border: lighten(@gray-base, 5%);

@label-color: @gray-base;

@badge-color: @gray-base;
@badge-bg: #fff;

@btn-toolbar-divider-bg:      @gray-darker;

@custom-select-color:         @text-color;
@custom-select-bg:            @gray-darker;
@custom-select-disabled-bg:   darken(@gray-darker, 10%);

@custom-control-indicator-bg: @gray-darker;

@custom-control-indicator-disabled-bg:     darken(@gray-darker, 10%);
@custom-control-indicator-disabled-border: @custom-control-indicator-disabled-bg;

@hr-divider-content-color:  @gray;
@hr-divider-content-bg:     @body-bg;
@hr-divider-before-bg:      @gray-darker;

@nav-header-color: @gray-dark;
@nav-tabs-border-color: @body-bg;
@nav-bordered-color-active: @brand-primary;

@list-group-header-color:  #fff;
@list-group-border:        @gray-darker;

@tooltip-bg: #fff;
@tooltip-color: @gray-base;

@statlist-border-color: @gray-darker;
@statlist-link-color: #fff;
@statlist-progress-bg: lighten(@gray-base, 5%);

@sidebar-toggler-color:        @gray-darker;

@dashhead-toolbar-divider-bg: @gray-darker;
@dashhead-subtitle-color: @gray-darker;

@iconav-bg:           lighten(@body-bg, 5%);
@iconav-brand-bg:     darken(@body-bg, 10%);
@iconav-brand-color:  @gray;
@iconav-brand-hover-color:  @gray-light;
@iconav-link-border:  @body-bg;
@iconav-link-active-bg: @body-bg;

@sidebar-brand-color:       @gray-dark;
@sidebar-brand-hover-color: @gray;

// pulled in from marketing theme
@block-color:              inherit;
@block-bg:                 @body-bg;
@block-color-inverted:     #222;
@block-bg-inverted:        #DDD;
@block-title-font-size-sm: floor((@font-size-base * 4));
@block-title-font-size:    floor((@font-size-base * 3));
@block-lead-font-size-sm:  floor((@font-size-base * 1.5));
@block-lead-font-size:     floor((@font-size-base * 1.3));
@block-vertical-padding:   120px;