// THEME
// -------------------------------------------------

// Variables
@import "basic/variables.less";
@import "basic/mixins.less";

// Color scheme
@color-primary:              rgb(87, 153, 230); // chagne this value to apply new colorset
@color-secondary:            desaturate(darken(@color-primary, 15%), 15%);
@color-pale:                 spin(hsl(hue(@color-primary), 54%, 95%), -7);

@state-primary-text:         @color-primary;
@state-primary-bg:           @color-pale;
@state-primary-inverse-bg:   @color-primary;
@state-primary-border:       darken(spin(@state-primary-bg, -10), 5%);

@link-color:                 @color-secondary;
@link-hover-color:           darken(@link-color, 15%);

@component-active-bg:        @color-primary;
@component-hover-bg:         @color-primary;

@dropdown-link-hover-bg:     @component-hover-bg;
@dropdown-link-active-bg:    @component-active-bg;

@table-bg-hover:             @color-pale;
@table-bg-active:            @table-bg-hover;

@btn-primary-bg:             @color-primary;
@btn-primary-border:         darken(@btn-primary-bg, 5%);

@badge-active-color:         @link-color;

@progress-bar-bg:            @color-primary;

@input-border-focus:         @link-color;

@list-group-hover-bg:        @color-pale;
@list-group-active-bg:       @component-active-bg;

@label-primary-bg:           @color-primary;
@panel-primary-border:       @color-primary;

@pager-active-bg:            @component-active-bg;

@navbar-inverse-bg:          @color-secondary;
@navbar-inverse-border:                     darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-hover-bg:              lighten(@navbar-inverse-bg, 6%);
@navbar-inverse-link-active-bg:             lighten(@navbar-inverse-bg, 10%);
@navbar-inverse-toggle-hover-bg:            darken(@navbar-inverse-bg, 5%);
@navbar-inverse-toggle-border-color:        lighten(@navbar-inverse-bg, 10%);

@nav-pills-active-link-hover-bg:            @component-active-bg;
@nav-secondary-active-border-color:         @component-active-bg;
@nav-secondary-active-link-hover-color:     @component-active-bg;
@nav-primary-active-border-color:           @component-active-bg;

// Minxins
.form-control-focus(@color: @input-border-focus)
{
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus
  {
    border-color: @color;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }
}

.button-variant(@color; @background; @border)
{
  color: @color;
  background-color: @background;
  border-color: darken(@background, 12%);

  &:hover,
  &:focus,
  &:active,
  &.active,
  .open .dropdown-toggle& {
    color: @color;
    background-color: darken(@background, 8%);
        border-color: darken(@border, 12%);
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: @background;
          border-color: @border;
    }
  }
}

.label-variant(@color)
{
  background-color: @color;
  &[href]
  {
    &:hover,
    &:focus
    {
      background-color: darken(@color, 10%);
    }
  }
}

.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;)
{
  border-color: @border;
  & > .panel-heading
  {
    + .panel-collapse .panel-body
    {
      border-top-color: @border;
    }
  }
  & > .panel-footer
  {
    + .panel-collapse .panel-body
    {
      border-bottom-color: @border;
    }
  }
}

// Scaffolding
a
{
  color: @link-color;

  &:hover,
  &:focus
  {
    color: @link-hover-color;
  }
}

// Buttons
.btn-primary
{
  .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}

.btn-link
{
  color: @link-color;
  &:hover,
  &:focus
  {
    color: @link-hover-color;
  }
  &[disabled],
  fieldset[disabled] &
  {
    &:hover,
    &:focus
    {
      color: @btn-link-disabled-color;
    }
  }
}

// Labels
.label-primary { .label-variant(@label-primary-bg); }

// Labels.fix
.btn-primary .label-badge,.btn-primary .label-dot
{
  background-color: lighten(@btn-primary-bg, 20%)
}

// Type
.text-primary
{
  color: @color-primary;
  &:hover
  {
    color: darken(@color-primary, 10%);
  }
}

.text-muted
{
  a
  {
    &:hover,
    &:active
    {
      color: @link-color;
    }
  }
}

.text-link
{
  &:hover,
  &:active
  {
    color: @link-color;
  }
}

// Type.bg
.bg-primary
{
  background-color: @state-primary-inverse-bg;
  a&:hover {
    background-color: darken(@state-primary-inverse-bg, 10%);
  }
}

// Type.hightlight
.highlight-primary {
  background-color: @state-primary-bg;
  a&:hover {
    background-color: darken(@state-primary-bg, 10%);
  }
}

// Form
.form-control
{
  .form-control-focus();
}

// List group
.list-group-item
{
  a&
  {
    &:hover,
    &:focus { text-decoration: none; background-color: @list-group-hover-bg; color: @list-group-hover-color}
  }

  &.active,
  &.active:hover,
  &.active:focus
  {
    background-color: @component-active-bg;
    border-color: @component-active-bg;
  }
}

// Navbar
.navbar-inverse
{
  background-color: @navbar-inverse-bg;
  border-color: @navbar-inverse-border;

  .navbar-nav
  {
    > li.nav-heading
    {
      background-color: darken(@navbar-inverse-bg, 5%);
    }

    > li > a
    {
      &:hover,
      &:focus
      {
        background-color: @navbar-inverse-link-hover-bg;
      }
    }
    > .active > a
    {
      &,
      &:hover,
      &:focus
      {
        background-color: @navbar-inverse-link-active-bg;
      }
    }
  }

  .navbar-toggle
  {
    border-color: @navbar-inverse-toggle-border-color;
    &:hover,
    &:focus
    {
      background-color: @navbar-inverse-toggle-hover-bg;
    }
  }

  .navbar-collapse,
  .navbar-form
  {
    border-color: darken(@navbar-inverse-bg, 7%);
  }

  .navbar-nav
  {
    > .open > a
    {
      &,
      &:hover,
      &:focus
      {
        background-color: @navbar-inverse-link-active-bg;
      }
    }

    @media (max-width: @screen-xs-max)
    {
      .open .dropdown-menu
      {
        > .dropdown-header
        {
          border-color: @navbar-inverse-border;
        }

        > li > a
        {
          &:hover,
          &:focus
          {
            background-color: @navbar-inverse-link-hover-bg;
          }
        }

        > .active > a
        {
          &,
          &:hover,
          &:focus
          {
            background-color: @navbar-inverse-link-active-bg;
          }
        }
      }
    }
  }
}

// Navbar.fixed-left
.navbar-fixed-left
{
  &.navbar-inverse
  {
    .navbar-header,
    .navbar-nav
    {
      border-bottom: 1px solid lighten(@navbar-inverse-bg, 10%);
      .box-shadow(inset 0 -1px 0 @navbar-inverse-border);
    }

    &.navbar-collapsed .navbar-nav > li.nav-heading:hover
    {
      color: lighten(@navbar-inverse-link-color, 5%);
      background-color: darken(@navbar-inverse-bg, 8%);
    }
  }
}

// Nav
.nav
{
  > li > a
  {
    &:hover,
    &:focus
    {
      color: @link-hover-color;
    }
  }

  .open > a
  {
    &,
    &:hover,
    &:focus
    {
      border-color: @link-color;

      .caret
      {
        border-top-color: @link-hover-color;
        border-bottom-color: @link-hover-color;
      }
    }
  }
}

.nav-pills
{
  > li
  {
    &.active > a
    {
      &,
      &:hover,
      &:focus
      {
        background-color: @nav-pills-active-link-hover-bg;
      }
    }
  }
}

.nav-primary
{
  > li
  {
    &.active > a
    {
      &,
      &:hover,
      &:focus
      {
        background-color: @component-active-bg;
        border-color: @component-active-bg;
      }
    }
  }
}

.nav-secondary
{
  > li
  {
    &.active > a
    {
      &,
      &:hover,
      &:focus
      {
        color: @nav-secondary-active-link-hover-color;
        border-bottom-color: @nav-secondary-active-border-color;

        .caret
        {
          border-top-color: @nav-secondary-active-link-hover-color;
          border-bottom-color: @nav-secondary-active-link-hover-color;
        }
      }
    }
  }
}

.nav-stacked
{
  &.nav-secondary
  {
    > li
    {
      &.active > a
      {
        &,
        &:hover,
        &:focus
        {
          .box-shadow(inset -2px 0 0 @nav-secondary-active-border-color);
        }
      }
    }
  }
}

.nav .caret
{
  border-top-color: @link-color;
  border-bottom-color: @link-color;
}
.nav a:hover .caret
{
  border-top-color: @link-hover-color;
  border-bottom-color: @link-hover-color;
}

// Pager
.pager
{
  > .active > a,
  > .active > span
  {
    &,
    &:hover,
    &:focus
    {
      background-color: @pager-active-bg;
    }
  }
}

// Panel.type
.panel-primary { .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); }

// Table
.table-hover > tbody > tr:hover
{
  > td,
  > th
  {
    background-color: @table-bg-hover;
  }
}

.table tr
{
  > td.active,
  > th.active,
  &.active > td,
  &.active > th
  {
    background-color: @table-bg-active;
  }
}

table.tablesorter thead tr .headerSortUp:after,
table.tablesorter thead tr .headerSortDown:after{color:@link-color!important;}

// Chossen
.chosen-container-single
{
  .chosen-search
  {
    &:focus
    {
      border-color: @input-border-focus!important;
    }
  }
}

.chosen-container .chosen-results
{
  li
  {
    &.highlighted
    {
      background-color: @dropdown-link-hover-bg!important;
    }
  }
}

.chosen-container-active
{
  .chosen-single
  {
    @color-rgba:  rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6)!important;
    border-color: @input-border-focus!important;
  }

  &.chosen-with-drop .chosen-single
  {
    border-color:  @dropdown-fallback-border!important; // IE8 fallback
    border-color:  @dropdown-border!important;
  }

  .chosen-choices
  {
    @color-rgba:  rgba(red(@input-border-focus), green(@input-border-focus), blue(@input-border-focus), .6)!important;
    border-color: @input-border-focus!important;
  }
}

// Dropdown
.dropdown-menu > li > a
{
  &:hover,
  &:focus
  {
    background-color: @dropdown-link-hover-bg;
  }
}

.dropdown-menu > .active > a
{
  &,
  &:hover,
  &:focus
  {
    background-color: @dropdown-link-active-bg;
  }
}

.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a
{
  background-color: @dropdown-link-hover-bg;
}
.dropdown-submenu:hover > a:after { border-left-color: @dropdown-link-hover-color; }


// Datetimepicker
.datetimepicker td.day.today
{
    background-color: @color-warning!important;
    border-color: @color-warning!important;
}
.datetimepicker td.day.active
{
    background-color: @color-primary!important;
    border-color: darken(@color-primary, 10%)!important;
}
.datetimepicker td.day.active:hover
{
    background-color: darken(@color-primary, 10%)!important;
}
.datetimepicker td.day.today:hover,
.datetimepicker td.day.today.active:hover{
    background-color: darken(@color-warning, 10%)!important;
}

// Kindeditor
.ke-container
{
  &.focus
  {
    @color:       @input-border-focus;
    @color-rgba:  rgba(red(@color), green(@color), blue(@color), .6);
    border-color: @color!important;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}!important");
  }
}

.ke-menu-item-on
{
  background-color: @dropdown-link-active-bg!important;
}

.ke-colorpicker-cell-on
{
  background-color: @dropdown-link-active-bg!important;
}

.ke-input-text
{
  @color: @input-border-focus;
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  &:focus
  {
    border-color: @color!important;
    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}!important");
  }
}

// Messager
.messager-primary
{
  background-color: @state-primary-inverse-bg;
}

// Comment
.comment
{
  &:hover
  {
    > .content
    {
      > .actions
      {
        > a
        {
          color: @link-color;
        }
      }
    }
  }
}
