@import "_variables";

@formBG: #fcfdfe;
@focusBg: lighten(@formBG, 10%);
@hoverBg: lighten(@formBG, 5%);
@formFG: #333;
@formBorder: #dfe4e7;


@g_Form-BorderRadius: 2px;

.t-Form-inputContainer:before {
  color: @formFG;
}

.apex-item-textarea,
.apex-item-text,
.apex-item-select {
  color: @formFG;
  background-color: @formBG;
  border-color: @formBorder;
  &.apex-page-item-error {
    &:required:valid {
      border-color: @formBorder;
    }
    border-color: @formBorder;
  }
}

.t-Form-fieldContainer--floatingLabel .t-Form-inputContainer .apex-item-display-only {
  color: @formFG;
  background-color: @hoverBg;
  border-color: @formBorder;
  border-style: dashed;
}

/* File Upload */
.apex-item-file-dropzone-label {
  background-color: @hoverBg;
  color: fade(@formFG,70%);
  border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
  .u-RTL & {
    border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
  }
}
.apex-item-file-dropzone-icon {
  background-color: @formBG;
  border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
  .u-RTL & {
    border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
  }
}
.apex-item-file:hover + .apex-item-file-dropzone  {
  .apex-item-file-dropzone-label {
    color: @formFG;
  }
  .apex-item-file-dropzone-icon {
    background-color: @focusBg;
    color: @formFG;
  }
}
.apex-item-file:focus + .apex-item-file-dropzone  {
  .apex-item-file-dropzone-label {
    border-color: @g_Focus;
    color: @formFG;
  }
  .apex-item-file-dropzone-icon {
    border-color: @g_Focus;
    background-color: @g_Focus;
    color: #FFF;
  }
}

.apex-item-textarea:focus,
.apex-item-text:focus,
.apex-item-select:focus {
    background-color: @focusBg !important;
    border-color: @g_Focus !important;
}

.apex-item-textarea:hover,
.apex-item-text:hover,
.apex-item-select:hover  {
  background-color: @hoverBg;
}

.t-Form-inputContainer input::-webkit-input-placeholder{
  color: contrast(@formBG, darken(@formBG,  100%), lighten(@formBG,  100%),  43%);
  opacity: .4;
}
.t-Form-inputContainer input::-moz-placeholder{
  color: contrast(@formBG, darken(@formBG,  100%), lighten(@formBG,  100%),  43%);
  opacity: .4;
}
.t-Form-inputContainer input:-ms-input-placeholder{
  color: contrast(@formBG, darken(@formBG,  100%), lighten(@formBG,  100%),  43%);
  opacity: .4;
}

.t-Form input.file {
  color: @formFG;
}
.t-Form-inputContainer span.display_only {
  border-color: transparent;
  background-color: transparent;
}
.t-Form-select,
.t-Form-inputContainer select.selectlist,
.t-Form-inputContainer select.yes_no {
  color: @formFG;
  border-color: contrast(@formBG, darken(@formBG,   10%), lighten(@formBG,   10%),  43%);
}
.t-Form-field--readOnly {
  background-color: transparent;
}
.t-Form-radioLabel,
.t-Form-inputContainer .radio_group label,
.t-Form-checkboxLabel,
.t-Form-inputContainer .checkbox_group label,
.t-Form-label {
  color: @formFG;
  // .text-dark();
}
.t-Form-error {
  color: @g_Danger-BG;
}
// .has-icon:required:valid + .apex-item-icon {
//   color: @formFG;
// }

.t-Form-postText {
  color: fade(contrast(@formFG, desaturate(darken(@formFG, 50%), 100%), desaturate(lighten(@formFG, 50%), 50%)), 100%);
}
.t-Form--search {
  input.t-Form-searchField {
    background-color: @formBG;
    color: contrast(@formBG, darken(@formBG,   75%), lighten(@formBG,   75%),  43%);
  }
}

.a-Button.a-Button--calendar,
.a-Button.a-Button--popupLOV {
  border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
  .u-RTL & {
    border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
  }
}

.t-Form-inputContainer input.hasDatepicker,
.t-Form-inputContainer input.popup_lov {
  border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
  .u-RTL & {
    border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
  }
}


/******************************************************************************
Checkbox + Radio Buttons
******************************************************************************/
.checkbox_group input,
.radio_group input {
  & + label {
    &:before {
      background-color: @formBG;
    }
  }
/* Focus
   ========================================================================== */
  &:focus + label:before {
    border-color: @g_Focus;
  }
  &:focus:checked + label:before {
    border-color: @g_Focus;
    background-color: @g_Focus;
    box-shadow: 0 0 0 1px @formBG inset;
  }
/* Checked
   ========================================================================== */
  &:checked {
    & + label:before {
      border-color: @g_Focus;
      background-color: @g_Focus;
    }
  }
}

/******************************************************************************
Radio Specific
******************************************************************************/
.radio_group input {
  & + label {
    &:after {
      background-color: @formBG;
    }
  }
}

/******************************************************************************
Radio Button Pills with Checkbox + Radio Buttons
******************************************************************************/
.t-Form-fieldContainer--radioButtonGroup .checkbox_group input {
  & + label {
    &:before {
      border: transparent;
    }
  }
/* Focus
   ========================================================================== */
  &:focus + label:before {
    border-color: @g_Focus;
  }
  &:focus:checked + label:before {
    border-color: @formBG;
    background-color: @formBG;
    box-shadow: 0 0 0 1px @g_Focus inset;
  }

  &:focus:checked + label:after {
    color: @g_Focus;
  }
/* Checked
   ========================================================================== */
  &:checked {
    & + label:before {
      border-color: @formBG;
      background-color: @formBG;
      opacity: 1;
    }

    & + label:after {
      color: @g_Focus;
    }
  }
}

/* Pre and Post Text Styles
   ========================================================================== */
.t-Form-fieldContainer--preTextBlock .t-Form-itemText--pre,
.t-Form-fieldContainer--postTextBlock .t-Form-itemText--post {
  background-color: @formBG;
  box-shadow: 0 0 0 .1rem contrast(@formBG, darken(@formBG,   10%), lighten(@formBG,   10%),  43%) inset;
  border-radius: @g_Form-BorderRadius;
}

.t-Form-fieldContainer--preTextBlock {
  .t-Form-itemText--pre {
    border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
    .u-RTL & {
      border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
    }
  }
}
.t-Form-fieldContainer--postTextBlock {
  .t-Form-itemText--post {
    border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
    .u-RTL & {
      border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
    }
  }
}

/* Icon Focus State
   ========================================================================== */
.apex-item-has-icon:focus + .apex-item-icon {
  color: @g_Focus;
}

/* ==========================================================================
   Floating Labels
   ========================================================================== */
.t-Form-fieldContainer--floatingLabel {
  .apex-item-icon {
    // background-color: mix(@formBG,transparent);
    color: fade(contrast(@formFG, desaturate(darken(@formFG, 10%), 100%), desaturate(lighten(@formFG, 10%), 50%)), 100%);
    box-shadow: -.1rem 0 0 #dfe4e7 inset;
    border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
    .u-RTL & {
      box-shadow: .1rem 0 0 #dfe4e7 inset;
      border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
    }
  }
  .apex-item-has-icon:focus + .apex-item-icon {
    box-shadow: none;
  }
}

/* Help Button
   ========================================================================== */
 .t-Form-helpButton {
    &:focus .a-Icon {
      color: @g_Focus;
    }
 }

/* Pill Buttons
   ========================================================================== */

/* Vertical Pills */
.t-Form-fieldContainer--radioButtonGroup .t-Form-itemWrapper > .apex-item-group {
  & > .apex-item-option:first-of-type label {
    border-radius: @g_Form-BorderRadius @g_Form-BorderRadius 0 0;
  }
  & > .apex-item-option:last-of-type label {
    border-radius: 0 0 @g_Form-BorderRadius @g_Form-BorderRadius;
  }
}

/* Horizontal Pills */
.t-Form-fieldContainer--radioButtonGroup .apex-item-grid .apex-item-grid-row:only-child {
  .apex-item-option:first-of-type label {
    border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
  }
  .apex-item-option:last-of-type label {
    border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
  }
}

.u-RTL {
  .t-Form-fieldContainer--radioButtonGroup .apex-item-grid .apex-item-grid-row:only-child {
    .apex-item-option:first-of-type label {
      border-radius: 0 @g_Form-BorderRadius @g_Form-BorderRadius 0;
    }
    .apex-item-option:last-of-type label {
      border-radius: @g_Form-BorderRadius 0 0 @g_Form-BorderRadius;
    }
  }
}