/**
 * 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: #333;

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

@ui-State-Default-BG: #E7EBED;
@ui-State-Default-FG: #000000;

@ui-State-Active-BG: @g_Link-Base;
@ui-State-Active-FG: #FFF;

/* 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-button,
body .ui-widget-content .ui-state-default,
body .ui-widget-header .ui-state-default {
  background-color: @ui-State-Default-BG;
  background-image: linear-gradient(to bottom, #FFF 0%, #f1f3f3 3.64%, #e7ebed 50%, #e3e7e9 100%);
  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: none #FAFBFB;
  color: #0572ce;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) inset;
}

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: none #FAFBFB;
  color: #0572ce;
}

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-state-down,
body .ui-widget-content .ui-state-active,
body .ui-widget-header .ui-state-active {
  background: none @ui-State-Active-BG;
  background-image: none;
  color: @ui-State-Active-FG;
}

/* Interaction Cues
----------------------------------*/
body .ui-state-highlight,
body .ui-widget-content .ui-state-highlight,
body .ui-widget-header .ui-state-highlight {
  background: none 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: none @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: none 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: 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: 2px;
}

/* Dialogs
----------------------------------*/
body .ui-dialog .ui-dialog-titlebar {
  background-color: #F5F5F5;
  border-bottom: 1px solid contrast(#F5F5F5, darken(#F5F5F5,   10%), lighten(#F5F5F5,   10%),  43%);
}

body .ui-dialog .ui-dialog-title {
  color: @ui-Header-FG;
}

body .ui-dialog .ui-dialog-content,
.t-Dialog-page {
  background: none #F9F9F9;
  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: 2px;
}

body .ui-button.ui-corner-top,
body .ui-button.ui-corner-left,
body .ui-button.ui-corner-tl {
  border-top-left-radius: 2px;
}

body .ui-button.ui-corner-top,
body .ui-button.ui-corner-right,
body .ui-button.ui-corner-tr {
  border-top-right-radius: 2px;
}

body .ui-button.ui-corner-bottom,
body .ui-button.ui-corner-left,
body .ui-button.ui-corner-bl {
  border-bottom-left-radius: 2px;
}

body .ui-button.ui-corner-bottom,
body .ui-button.ui-corner-right,
body .ui-button.ui-corner-br {
  border-bottom-right-radius: 2px;
}

body .ui-dialog {
  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.45);

  .ui-dialog-title {
    color: #333;
    font-weight: bold;
  }
}

body .ui-dialog .ui-dialog-buttonpane {
  border-top-color: #F0F0F0;
}

body .ui-widget-overlay {
  background: #a0a0a0;
  opacity: .3;
}

body .ui-dialog.t-Dialog--wizard .ui-dialog-title {
  font-size: 1.8rem;
  font-weight: bold;
}

body .ui-dialog.t-Dialog--wizard .ui-dialog-content {
  border-width: none;
}


body .ui-button.ui-state-default.ui-dialog-titlebar-close {
  background-color: transparent;
  background: none;
  border-width: 0;
  box-shadow: none;
  color: #878C90;

  &.ui-state-active {
    background-color: @ui-State-Active-BG;
    background-image: none;
    color: @ui-State-Active-FG;
  }
}