/**
 * 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;

/* Overlay
----------------------------------*/
.ui-widget-overlay {
  --jui-overlay-background-color: @g_Overlay-bg;
  // opacity: 1;
}

/* 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,
body .ui-widget.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;
  box-shadow: 0 0 0 1px fade(@_base, 1.25) inset;
}

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-active,
body .ui-widget-content .ui-state-active,
body .ui-widget-header .ui-state-active {
  box-shadow: 0 0 0 1px @_base-alpha-6 inset, 0 1px 2px @_base-shadow-7 inset;
}

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;
  box-shadow: 0 2px 1px @_base-shadow-2, 0 0 0 1px fade(@_base, 1.25) 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-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,  85%), 100%), desaturate(lighten(@g_Accent-FG,  85%), 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,  85%), 100%), desaturate(lighten(@g_Accent-FG,  85%), 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
----------------------------------*/
.ui-datepicker {
  --jui-datepicker-shadow: 0 2px 6px @_base-shadow-2;
}

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;
      color: @g_Accent-FG;
    }
  }

  &.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%);
  color: @ui-Body-FG;
}

body .ui-datepicker th {
  color: contrast(@ui-Body-FG, darken(@ui-Body-FG,   25%), lighten(@ui-Body-FG,   25%),  43%);
  border-bottom-color: @_base-alpha-4;
}

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;
}

body .ui-datepicker .ui-datepicker-prev,
body .ui-datepicker .ui-datepicker-next {
  &:active {
    box-shadow: 0 2px 1px @_base-shadow-2 inset, 0 0 0 1px fade(@_base, 1.25) inset;
  }
}

/* Dialogs
----------------------------------*/
.ui-dialog {
  --jui-dialog-title-close-border-radius: 100%;
  --jui-dialog-shadow: 0 4px 16px -4px @_base-shadow-6, 0 8px 24px 0 @_base-shadow-5, 0 0 0 1px @_base-alpha-6;
  // box-shadow: 0 4px 16px -4px @_base-shadow-6, 0 8px 24px 0 @_base-shadow-5, 0 0 0 1px @_base-alpha-6;
  --jui-dialog-titlebar-border-width: 1px;
  --jui-dialog-titlebar-border-color: @_base-alpha-2;
  --jui-dialog-titlebar-background-color: @ui-Header-BG;
  --jui-dialog-titlebar-text-color: @ui-Body-FG;
  --jui-dialog-buttonpane-border-color: contrast(@g_Region-BG, darken(@g_Region-BG,   8%), lighten(@g_Region-BG,   8%),  43%);
}

.ui-dialog-titlebar {
  // background-color: @ui-Header-BG;
  // border-bottom: 1px solid @_base-alpha-2;
}

.ui-dialog.t-Dialog-page--wizard .ui-dialog-titlebar {
  background-color: @ui-Body-BG;
}

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

.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;
}

.ui-dialog-titlebar-close {
  // border-radius: 100%;
}

.ui-dialog-buttonpane {
  // border-top-color: contrast(@g_Region-BG, darken(@g_Region-BG,   8%), lighten(@g_Region-BG,   8%),  43%);
}