/**************************************************************************************************************************
 * JQUERY UI
 * 
 * Needs style_elements.less. Uses .button() .win()
 *************************************************************************************************************************/

// Layout helpers
.ui-helper-hidden {display: none;}
.ui-helper-hidden-accessible {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute !important;width: 1px;} // ALT: clip: rect(1px, 1px, 1px, 1px);
.ui-helper-reset {margin: 0;padding: 0;border: 0;outline: 0;line-height: 1.3;text-decoration: none;font-size: 100%;list-style: none;}
.ui-helper-clearfix:before,.ui-helper-clearfix:after {content: "";display: table;border-collapse: collapse;}
.ui-helper-clearfix:after {clear: both;}
.ui-helper-clearfix {min-height: 0; /* support: IE7 */}
.ui-helper-zfix {width: 100%;height: 100%;top: 0;left: 0;position: absolute;opacity: 0;filter:Alpha(Opacity=0);}
.ui-front {z-index: @zindex-dialog-modal; }

// Interaction Cues
.ui-state-disabled {cursor: default !important;}

// states and images
.ui-icon {display: block;text-indent: -99999px;overflow: hidden;background-repeat: no-repeat;}

// Overlays
.ui-widget-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;}
.ui-widget-overlay {background: #aaaaaa none;opacity: .6;filter: Alpha(Opacity=60);}
.ui-widget-shadow {margin: -8px 0 0 -8px;padding: 8px;background: #aaaaaa none;opacity: .3;filter: Alpha(Opacity=30);border-radius: 8px;}

.ui-corner-all { border-radius: @standard-border-radius; }

.ui-button {
  .button-style();

  &.ui-state-focus {
    .button-style-focus();
  }
  
  .ui-button-text, .ui-icon {
    color: @button-text-color;
  }
  &.ui-button-icon-only {
    .ui-icon { margin: 0 .1em; }
    .ui-button-text { display: none; }
  }
  &.ui-button-disabled {
    .button-style.disabled();
    .ui-button-text, .ui-icon {
      .button-style.disabled .link;
    }
  }
  &.ui-state-active {
    .button-style.pressed();
  }
}

.ui-buttonset {
  .buttonset-style();
  &:focus-within {
    .button-style-focus();

    .ui-button {
      // reset .button-style-focus();
      .button-unstyle-focus();
    }
  }
}

.ui-dialog {
  .win();
  position: absolute;
  overflow: hidden;
  width: 300px;
  padding: 0;
  font-size: 1em;
  z-index: @zindex-dialog;
  
  .ui-dialog-titlebar {
    .wintitle();
    font-size: 1.1em;
    
    .ui-dialog-title { 
      float: left; margin: .1em 16px .2em 0;
    }
    .ui-dialog-titlebar-close {
      position: absolute;
      right: .3em;
      top: 35%;
      width: 21px;
      margin: -10px 0 0 0;
      padding: 1px;
      height: 20px;
      cursor: pointer;
      border: 0 none;
      background: none transparent;
      //background-color: transparent;
      box-shadow: none;
      &::-moz-focus-inner {
        border: none;
      }
      
      .ui-icon {
        position: absolute;
        top: 50%;
        margin-top: -8px;
        left: 50%;
        margin-left: -8px;
      }
      
      &.ui-button-icon-only .ui-button-text {
        display: block;
        line-height: normal;
        padding: .4em;
        text-indent: -9999999px;
      }
    }
  }
  .ui-dialog-content {
    border: 0; padding: .5em 1em; background: none; zoom: 1; 
    max-height: 600px; // Il max-height 
    position: relative;
    .async_loading_iframe {
      margin: -.5em 0 0 0;
    }
  }
  .async_loading_iframe {
    width: 100%; height: 100%;
    min-height: 100px;
    &.with_bg {
      width: 10%; height: 6%; min-height: 50px;
      position: absolute; left: 45%; top: 47%;
    }
    &.over {
      position: absolute; left: 0; top: 0;
    }
  }
  .ui-dialog-buttonpane {
    text-align: center; 
    background-image: none; 
    margin: .5em 0 0 0; 
    border: none;
    padding: .3em 0;
  }
  &.dialog_info .ui-dialog-titlebar {
    background: none mix(@dialog-title-background-color, @blue, 50%);
  }
  &.dialog_warn .ui-dialog-titlebar {
    background: none mix(@dialog-title-background-color, @red, 50%);
  }
  &.dialog_ok .ui-dialog-titlebar {
    background: none mix(@dialog-title-background-color, @green, 50%);
  }
  &.dialog_standard_href .ui-dialog-content { // Dialog loaded using iframe (standard)
    padding: 0;
    min-height: 600px;
  }
  &.dialog_ajax_href .ui-dialog-content, &.dialog_standard_content .ui-dialog-content, &.dialog_standard_rel .ui-dialog-content {
    overflow: auto;
  }
  &.no-close .ui-dialog-titlebar-close { display: none; }
  //.ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }

  // Prevent dotted outline on full focused dialog on FF
  &:focus, &:-moz-focusring {
    outline: 0 none !important;
  }
}
//.ui-draggable .ui-dialog-titlebar { cursor: move; }

.ui-menu {
  list-style: outside none none;
  padding: 0px;
  margin: 0px;
  display: block;
  outline: medium none;
  .ui-menu-item {
    position: relative;
    margin: 0px; padding: 3px 1em 3px 0.4em;
    cursor: pointer;
    min-height: 0px;
    &.ui-state-focus, &.ui-state-active {}
  }
}

.ui-autocomplete {
  position: absolute;
  top: 0px;
  left: 0px;
  cursor: default;
  
  .dropdown();
  min-width: auto;
  max-width: none;
  margin: 0; padding: 0;
  .ui-menu-item {
    display: block;
    padding: 0.5em; margin: 0;
    font-weight: bold;
    &.ui-state-focus, &.ui-state-active {
      background-color: @button-background-color;
      color: @button-text-color;
      a {
        color: @button-text-color;
      }
    }
  }
}

.ui-tabs {
  .ui-tabs-nav {
    border-radius: 0;
  }
}

/**
 * JQUERY HORIZONTAL UI TABS
 */
.ui-tabs.tabs_horizontal {
  > ul {
    .tabs-style(~'.ui-state-active', false, ~'.ui-state-focus');
    padding: 0px 0px 0px .5em;
  }
  .ui-tabs-panel {
    margin-top: .5em;
    &.ui-tabs-noscroll {
      padding: 0;
    }
  }
}
.ui-tabs.tabs_horizontal.button_color {
  > ul {
    .tabs-style(~'.ui-state-active', true, ~'.ui-state-focus');
  }
}

/**
 * JQUERY VERTICAL UI TABS
 */
.ui-tabs.tabs_vertical {
  position: relative;
  margin: 1em 0;
  > ul {
    margin: 0;
    padding: 0;
    text-align: left;
    float: left;
    li {
      width: @elysia_nodes_property_label-width + 1em;
      list-style-type: none;
      padding: .5em 1em;
      margin: 0;
      text-align: right;
      &.ui-state-active {
        background-color: @accent-color;
        font-weight: bold;
        border-radius: @standard-border-radius 0 0 @standard-border-radius;
        a {
          color: @text-color;
        }
      }
    }
  }
  .ui-tabs-panel {
    background: @background-color;
    border: 1px solid @accent-color;
    padding: .5em 1em;
    margin: .5em 0;
    overflow: auto;
    &.ui-tabs-noscroll {
      padding: 0;
    }
  }
}

.ui-tooltip {  // TODO
  .win();
  max-width: 300px;
  padding: .5em;
  z-index: @zindex-tooltip;
}

.ui-spinner {
  display: block;
  margin: @input-margin-top 0 @input-margin-bottom 0; padding: 0;
  position: relative;
  
  // hides natives spinner on Chrome, FF and the "clear-cross" by IE10-11
  input[type=number] {
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    &::-ms-clear {
      width: 0;
      height: 0;
    }
    -moz-appearance:textfield;
  }
  .ui-spinner-input {
    margin: 0;
    margin-right: 2em;
    // overlapping rounded corners
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .ui-spinner-button {
    width: 2.5em;
    height: 50%;
    min-height: inherit;
    padding: 0; margin: 0;
    position: absolute;
    right: 0;
    line-height: 1em;
    cursor: pointer;
    .ui-icon {
      display: none;
    }
  }
  .ui-spinner-up {
    top: 0;
    border-bottom: none;
    border-radius: 0 @button-border-radius 0 0;
    .ui-button-text:after {
      font-family: FontAwesome;
      font-weight: normal;
      content: "\f0d8";
    }
  }
  .ui-spinner-down {
    bottom: 0;
    border-top: none;
    border-radius: 0 0 @button-border-radius 0;
    .ui-button-text:after {
      font-family: FontAwesome;
      font-weight: normal;
      content: "\f0d7";
    }
  }
}

.ui-icon {
  font-family: FontAwesome;
  background: none repeat scroll 0 0 transparent;
  text-indent: 0; 
  width: auto; height: auto;
  min-width: 16px;
  
  vertical-align: middle;
  margin-top: 0;
  margin-right: .5em;
}
.ui-icon-closethick:before {
  content: @fa-var-times;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}
.ui-draggable-handle, .ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}