/* material design classes */

body, body .ui-widget, body div.ui-fluid {

  div.material, div.ui-material {
    position: relative;

    .ui-message.ui-message-error {
      font-size: 12px;
      color: @error-color;
      background: transparent;
      border: none;
      margin-left: -5px;

      .ui-message-error-icon {
        display: none;
      }
    }

    i.fa {
      position: absolute;
      right: 5px;
    }

    &.focused { //focused is set via javascript on input focus or when input has any value

      input.ui-inputfield, textarea.ui-inputtextarea, input.ui-autocomplete-input, span.ui-calendar > input.ui-inputfield {

        &::-webkit-input-placeholder { //now placeholder is visible because label will float
          color: #bbb;
        }

        &::-moz-placeholder {
          color: #bbb;
        }

        &:-ms-input-placeholder {
          color: #bbb;
        }

        ~ label {
          color: @text-color;
          font-size: 12px;
          top: -15px;

          &.material-focus  {
            color: @light-blue;
          }
        }

      }

      textarea.ui-inputtextarea.ui-inputfield ~ label {
        top: -8px;
      }

      span.ui-autocomplete, span.ui-calendar {

        ~ label {
          color: @text-color;
          font-size: 12px;
          top: -15px;

          &.ui-state-error, &.material-focus.ui-state-error {
            color: @error-color;
          }

          &.material-focus  {
            color: @light-blue;
          }
        }

      }

      div.ui-selectcheckboxmenu {

        ~ label, label.ui-selectcheckboxmenu-label {
          display: none; //checkboxmenu label is hidden on focus
        }
      }


    } //end focused

    //placeholder transparent by default because input label must be visible
    input.ui-inputfield, input.ui-autocomplete-input, textarea.ui-inputtextarea {

      &::-webkit-input-placeholder {
        color: transparent;
        .transition(240ms);
      }

      &::-moz-placeholder {
        color: transparent;
        .transition(240ms);
      }

      &:-ms-input-placeholder {
        color: transparent;
        .transition(240ms);
      }

      &:focus {
        &::-webkit-input-placeholder {
          .transition(none);
        }

        &::-moz-placeholder {
          .transition(none);
        }

        &:-ms-input-placeholder {
          .transition(none);
        }

      }
    }

    input.ui-inputfield, textarea.ui-inputtextarea, div.ui-selectonemenu, .ui-autocomplete, .ui-selectcheckboxmenu, .ui-calendar {

      display: block;
      border: none;
      border-bottom: solid 1px @input-border-color;
      background-size: 200px 100%;
      border-radius: 0 !important;
      .transition(all 0.3s cubic-bezier(.64, .09, .08, 1));
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, @light-blue 4%) no-repeat -10000px 0;

      ~ label {
        position: absolute;
        color: #9e9e9e;
        font-weight: 500;
        pointer-events: none;
        .transition(all 0.3s ease-in-out);
        top: 7px;
        margin-left: 5px;
      }

      &.ui-state-focus {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        outline: none;
        background-position: 0 0;
        ~ label {
          color: @light-blue;
          font-size: 12px;
          top: -15px;
        }

      }

      &.ui-state-disabled {
        ~ label {
          color: @gray-lte;
        }
      }

      &.ui-state-error {
        border: none;
        box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: solid 1px @box-shadow-color-error;
        color: @text-color;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, @error-color 4%) no-repeat -10000px 0;

        ~ label, ~ label.material-focus {
          color: @error-color;
        }

        &.ui-state-focus {
          background-position: 0 0;
          color: @text-color;
          .box-shadow(none);
        }

        .ui-selectonemenu-label {
          color: @text-color;
        }
      }

      .ui-selectonemenu-trigger, .ui-selectcheckboxmenu-trigger, .ui-autocomplete-dropdown {
        border: none;
        &.ui-state-hover, &.ui-state-focus {
          border: none;
          background: transparent !important;
          box-shadow: none !important;
          -webkit-box-shadow: none !important;
        }
      }

      .ui-selectonemenu-trigger .ui-icon {
        margin-left: 2px;
        
        &.ui-icon-triangle-1-s.icon-ripple {
          left: 3px;  
        }
      }

      button.ui-datepicker-trigger {
        top: -3px;
      }

      button.ui-autocomplete-dropdown {
          top: -4px;

          span.ui-icon-triangle-1-s:before {
              left: 4px;
          }

        @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
          span.ui-icon-triangle-1-s:before {
            top:-10px;
          }
        }
      }

      @-moz-document url-prefix() {
        button.ui-autocomplete-dropdown {
          top: 5px;
        }
      }

      span.ui-icon-triangle-1-s:before {
        top: 5px;
      }

      div.ui-selectcheckboxmenu-trigger span.ui-icon-triangle-1-s {
          top: 3px;
          &:before {
              left: 3px;
          }
      }

      label {
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
      }
    }

    .ui-selectcheckboxmenu {
      display: inline-table;
      &.ui-state-focus.ui-state-error {
        border: none;
      }
    }

    div.ui-selectcheckboxmenu {

      ~ label {
        position: relative;
        top: -30px;
      }

      &.ui-state-focus ~ label {
        display: none;
      }

    }

    span.ui-autocomplete, span.ui-calendar {
      border-bottom: none;
    }

    label.ui-outputlabel.ui-state-error, label.ui-outputlabel.ui-state-error.material-focus {
      color: @error-color;
    }

    textarea.ui-inputtextarea.ui-inputfield {
      border: 1px solid @input-border-color;
      padding: 15px;
      padding-left: 5px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 99%, @light-blue 1%) no-repeat -10000px 0;
      background-size: 2000px 100%;
      ~ label {
        padding: 7px;
        padding-left: 3px;
      }

      &.ui-state-focus {
        background-position: 0 0;
        ~ label {
          color: @light-blue;
          font-size: 12px;
          top: -8px;
        }

      }

      &.ui-state-error {
        border: solid 1px @box-shadow-color-error;
        color: @text-color;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 99%, @error-color 1%) no-repeat -10000px 0;

        &.ui-state-focus {
          background-position: 0 0;

        }

        ~ label {
          color: @error-color;
        }
      }

    }

    div.ui-selectonemenu {

      ~ label {
        top: -17px !important;
        font-size: 12px;
        margin-left: 5px;
        color: @text-color;
      }

      &.ui-state-disabled {
        ~ label {
          color: @gray-lte;
        }
      }
    }

    // left icon

    &.icon-left {

      button.ui-datepicker-trigger {
        left: 0;
        margin-left: -5px;
        width:32px;
      }

      .fa {
        left: 0px;
        width: 32px;
        cursor: pointer;

        &:hover {
          opacity: .8;
        }
      }

      input {
        padding-left: 30px;
      }

      input.ui-inputfield, span.ui-calendar {

        & ~ label {
          margin-left: 30px;
        }
      }
    } //end icon left


    //no floating label
    &.no-float {

      input.ui-inputfield, input.ui-autocomplete-input, textarea.ui-inputtextarea {

        &::-webkit-input-placeholder {
          color: @input-color-placeholder;
          .transition(none);
        }

        &::-moz-placeholder {
          color: @input-color-placeholder;
          .transition(none);
        }

        &:-ms-input-placeholder {
          color: @input-color-placeholder;
          .transition(none);
        }

        &.ui-state-error {
          &::-webkit-input-placeholder {
            color: @error-color;
          }

          &::-moz-placeholder {
            color: @error-color;
          }

          &:-ms-input-placeholder {
            color: @error-color;
          }
        }

      }

    } //end no float

  } //end div material

}