/**
 * Import Compass and Theme Variables
 */

@import "_variables";

@ui-Header-BG:                @g_Region-Header-BG;
@ui-Header-FG:                @g_Region-Header-FG;

@ui-Body-BG:                  @g_Region-BG;
@ui-Body-FG:                  @g_Region-FG;

@ui-Border:                   contrast(@g_Region-BG, darken(@g_Region-BG,  8%), lighten(@g_Region-BG,  8%),  43%);

@ui-State-Default-BG:         @g_Button-BG;
@ui-State-Default-FG:         @g_Button-Text;

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 12px;
}
.ui-widget .ui-widget {
  font-size: 12px;
}

/* Component containers
----------------------------------*/
body .ui-widget-content {
  border-color: @ui-Border;
  background-color: @ui-Body-BG;
  color: @ui-Body-FG;
}
body .ui-widget-content a {
  color: @g_Link-Base;
}
body .ui-widget-header {
  border-color: @ui-Border;
  background-color:  @ui-Header-BG;
  color: @ui-Header-FG;
}
body .ui-widget-header a {
  color: @ui-Header-FG;
}

/* Interaction states
----------------------------------*/
body .ui-state-default,
body .ui-widget-content .ui-state-default,
body .ui-widget-header .ui-state-default {
  background-color: @ui-State-Default-BG;
  color: @ui-State-Default-FG;
}
body .ui-state-default a,
body .ui-state-default a:link,
body .ui-state-default a:visited,
body .ui-state-active a,
body .ui-state-active a:link,
body .ui-state-active a:visited {
  color: @g_Link-Base;
}

body .ui-state-hover,
body .ui-widget-content .ui-state-hover,
body .ui-widget-header .ui-state-hover {
  background-color: lighten(@ui-State-Default-BG, 10%);
  color: @ui-State-Default-FG;
}
body .ui-state-focus,
body .ui-widget-content .ui-state-focus,
body .ui-widget-header .ui-state-focus {
  box-shadow: 0 0 0 1px @g_Focus inset,
              0 0 1px 2px fade(@g_Focus, 25%) !important;
  background-color: lighten(@ui-State-Default-BG, 10%);
  color: @ui-State-Default-FG;
}

body .ui-datepicker .ui-datepicker-buttonpane button:focus {
  outline: none;
  box-shadow: 0 0 0 1px @g_Focus inset,
              0 0 1px 2px fade(@g_Focus, 25%) !important;
}


body .ui-state-hover a,
body .ui-state-hover a:hover,
body .ui-state-hover a:link,
body .ui-state-hover a:visited,
body .ui-state-focus a,
body .ui-state-focus a:hover,
body .ui-state-focus a:link,
body .ui-state-focus a:visited {
  color: @g_Link-Base;
}
body .ui-state-active,
body .ui-widget-content .ui-state-active,
body .ui-widget-header .ui-state-active {
  background-color: darken(@ui-State-Default-BG, 10%);
  color: @ui-State-Default-FG;
}

/* Interaction Cues
----------------------------------*/
body .ui-state-highlight,
body .ui-widget-content .ui-state-highlight,
body .ui-widget-header .ui-state-highlight {
  background-color: lighten(@g_Accent-BG,50%);
  color: fade(contrast(@g_Accent-FG, desaturate(darken(@g_Accent-FG,  75%), 100%), desaturate(lighten(@g_Accent-FG,  75%), 50%)), 100%);
}
body .ui-state-highlight a,
body .ui-widget-content .ui-state-highlight a,
body .ui-widget-header .ui-state-highlight a {
  color: fade(contrast(@g_Accent-FG, desaturate(darken(@g_Accent-FG,  75%), 100%), desaturate(lighten(@g_Accent-FG,  75%), 50%)), 100%);
}
body .ui-state-error,
body .ui-widget-content .ui-state-error,
body .ui-widget-header .ui-state-error {
  background-color: @g_Danger-BG;
  color: @g_Danger-FG;
}
body .ui-state-error a,
body .ui-widget-content .ui-state-error a,
body .ui-widget-header .ui-state-error a {
  color: @g_Danger-FG;
}
body .ui-state-error-text,
body .ui-widget-content .ui-state-error-text,
body .ui-widget-header .ui-state-error-text {
  color: @g_Danger-BG
}



/* Date Picker
----------------------------------*/
body .ui-datepicker td span.ui-state-default,
body .ui-datepicker td a.ui-state-default {
  background-color: transparent;
  color: @ui-Body-FG;
  &.ui-state-active {
    background-color: @g_Accent-BG;
    color:  @g_Accent-FG;
    font-weight: bold;
    &.ui-state-hover {
      background-color: @g_Accent-BG !important;
    }
  }
  &.ui-state-hover {
    background-color: contrast(@ui-Body-BG, darken(@ui-Body-BG,  5%), lighten(@ui-Body-BG,  5%),  43%) !important;
  }
  &:focus {
    outline: none;
    box-shadow: 0 0 0 1px @g_Focus inset,
                0 0 1px 2px fade(@g_Focus, 25%) !important;
  }
}
body .ui-datepicker td span.ui-state-default.ui-state-highlight,
body .ui-datepicker td a.ui-state-default.ui-state-highlight {
  background-color: contrast(@ui-Body-BG, darken(@ui-Body-BG,  8%), lighten(@ui-Body-BG,  8%),  43%);
}
body .ui-datepicker th {
  color: contrast(@ui-Body-FG, darken(@ui-Body-FG,  25%), lighten(@ui-Body-FG,  25%),  43%);
}
body .ui-datepicker .ui-datepicker-header,
body .ui-datepicker .ui-datepicker-buttonpane button,
body .ui-datepicker .ui-datepicker-next,
body .ui-datepicker .ui-datepicker-prev {
  border-radius: @g_Button-BorderRadius;
}

/* Dialogs
----------------------------------*/
body .ui-dialog .ui-dialog-titlebar {
  background-color: @ui-Header-BG;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
body .ui-dialog .ui-dialog-title {
  color: @ui-Header-FG;
}
body .ui-dialog .ui-dialog-content,
.t-Dialog-page {
  background-color: @ui-Body-BG;
  color: @ui-Body-FG;
}

/* Wizard Dialog
----------------------------------*/

.t-Dialog--wizard {
  &.ui-dialog,
  &.ui-dialog .ui-dialog-titlebar,
  body .ui-dialog .ui-dialog-content {
    background-color: @ui-Body-BG;
    color: @ui-Body-FG;
  }
  &.ui-dialog .ui-dialog-title {
    color: @ui-Body-FG;
  }
}

/* Corner radius */
body .ui-corner-all {
  border-radius: @g_Container-BorderRadius;
}

body .ui-corner-top,
body .ui-corner-left,
body .ui-corner-tl {
  border-top-left-radius: @g_Container-BorderRadius;
}
body .ui-corner-top,
body .ui-corner-right,
body .ui-corner-tr {
  border-top-right-radius: @g_Container-BorderRadius;
}
body .ui-corner-bottom,
body .ui-corner-left,
body .ui-corner-bl {
  border-bottom-left-radius: @g_Container-BorderRadius;
}
body .ui-corner-bottom,
body .ui-corner-right,
body .ui-corner-br {
  border-bottom-right-radius: @g_Container-BorderRadius;
}

/* Corner radius */
body .ui-button.ui-corner-all {
  border-radius: @g_Button-BorderRadius;
}

body .ui-button.ui-corner-top,
body .ui-button.ui-corner-left,
body .ui-button.ui-corner-tl {
  border-top-left-radius: @g_Button-BorderRadius;
}
body .ui-button.ui-corner-top,
body .ui-button.ui-corner-right,
body .ui-button.ui-corner-tr {
  border-top-right-radius: @g_Button-BorderRadius;
}
body .ui-button.ui-corner-bottom,
body .ui-button.ui-corner-left,
body .ui-button.ui-corner-bl {
  border-bottom-left-radius: @g_Button-BorderRadius;
}
body .ui-button.ui-corner-bottom,
body .ui-button.ui-corner-right,
body .ui-button.ui-corner-br {
  border-bottom-right-radius: @g_Button-BorderRadius;
}