// User Input - TextBox, Textarea
//================================================== //

@import './input-mixins';

// Field Style
.field .checkbox-label,
.field .checkbox > label {
  color: $label-color;
  display: inline-block;
  font-size: $input-size-regular-font-size;
  margin-bottom: 0;
  margin-top: 0;
}

.field > input,
.field > textarea {
  margin-bottom: 0;
}

// Two Connected Fields
.compound-field {
  > .field,
  > .field-short {
    clear: both;
    display: inline-block;
    margin-right: 15px;

    &.field-checkbox label {
      line-height: 17px;
    }

    .error-message .message-text {
      float: left;
    }
  }

  > .checkbox-group-label {
    margin-top: 2px;
  }

  > .field {
    line-height: 37px;
    vertical-align: baseline;
  }

  > .field-short {
    margin-right: 10px;
    vertical-align: top;
  }

  .dropdown-wrapper {
    margin-bottom: 0;
    margin-top: -3px;
    vertical-align: middle;
  }
}

//Move a field up closer - two line fields
.attach-up {
  margin-top: -10px;
}

.attach-up-relative {
  top: -15px;
}

.attach-up-relative-x2 {
  padding-top: 37px;
  top: -37px;
}

.field {
  margin-bottom: $input-field-bottom-margin;
  position: relative;

  &.less-margin {
    margin-bottom: 5px;
  }

  textarea + .btn-actions {
    margin-left: 4px;
    position: absolute;
    top: calc(50% - 14px);
  }

  // Input Actions Button - controls/input-actions
  > .btn-actions {
    border-radius: 50%;
    height: 30px;
    min-height: 30px;
    min-width: 30px;
    position: relative;
    top: 0;
    width: 30px;

    .icon {
      height: 16px;
      margin-left: 0;
      width: 16px;
    }
  }

  > .textarea-wordcount {
    color: $label-color;
    margin-bottom: 0;
  }

  &.field-radio {
    margin-bottom: $input-field-bottom-margin;

    .icon-dirty {
      left: -1px;
      margin-top: 1px;
    }
  }

  &.field-checkbox {
    margin-block: $input-field-checkbox-margin-block-sm;

    .inline-checkbox .label-text {
      margin-bottom: 1px !important;
    }
  }

  .field:not(.field-checkbox) + &.field-checkbox {
    margin-bottom: $input-field-bottom-margin;
  }

  &.l-pull-left {
    margin-right: 20px;
  }

  &.top-padding {
    margin-top: 3rem;
  }
}

.field-short,
.form-layout-compact .field {
  > .textarea-wordcount {
    color: $label-color;
    font-size: $label-size-compact-font-size - 0.1;
    margin-bottom: 0;
  }
}

.field-pane {
  height: 0;
  overflow: hidden;
  padding: 0 0 0 25px;

  .field-content {
    padding: 20px 0;
  }
}

//Clearable input fx on search or input/clearable
.icon.close {
  color: $trigger-icon-fill-color;
  cursor: pointer;
  height: 18px;
  right: 29px;
  top: 0;

  &:hover {
    color: $trigger-hover-color;
  }

  &.is-empty {
    display: none;
  }
}

// Clear on an input by data setting
input[data-clearable] + button.close {
  position: relative;
  right: 30px;
  top: -1px;
}

button.close {
  height: 24px;
  margin: 0;
  min-height: 24px;
  min-width: 24px;
  position: absolute;
  right: 7px;
  top: 4px;
  width: 24px;

  &.is-empty {
    display: none;
  }
}

[data-clearable='true'] {
  padding-right: 32px;

  & + .icon.close {
    margin-left: -27px;
    right: auto;
    top: -2px;

    &:hover {
      color: $trigger-hover-color;
    }
  }
}

.is-disabled {
  .icon.close {
    cursor: default;
    opacity: 0.5;
  }
}

// Input Style
input,
textarea {
  @include input-style();
}

input:focus {
  border-color: $searchfield-toolbar-focus-color;
}

textarea[rows] {
  height: auto;
}

// Element with input "like" style borders
.input-style {
  background-color: $input-color-initial-background;
  border: 1px solid $input-border-color;
  border-collapse: separate;

  &:hover,
  &.is-hovered {
    border-color: $input-color-hover-border;
  }

  &[disabled],
  &.is-disabled {
    background-color: $input-color-disabled-background;
    border: solid 1px $input-color-disabled-border;
  }

  &[readonly],
  &.is-readonly {
    background-color: $input-color-readonly-background;
    border-color: $input-color-readonly-border;
  }

  &.is-placeholder {
    color: $input-placeholder-color;
  }

  &.is-focused {
    @include focus-state();
  }
}

// Text Area
textarea {
  min-height: $textarea-size-regular-height;
  overflow: auto;
  padding: 12px;
  line-height: 2rem;
  width: $textarea-size;

  &.resizable {
    resize: vertical;
  }

  .almost-empty {
    border-color: $error-color;
  }

  &.error {
    padding: 10px 25px 10px 10px;
  }

  &[readonly],
  &[disabled] {
    + .textarea-wordcount {
      display: none;
    }
  }

  &.taller {
    min-height: 188px;  //height of three fields
  }
}

.textarea-wordcount {
  display: block;
  line-height: 2rem;
  font-size: $ids-size-font-sm;
  min-height: auto;
  width: $textarea-size;

  &.almost-empty {
    color: $error-color;
  }
}

.textarea-print {
  display: none;
  white-space: pre-line;
}

// Print Style Sheet
@media print {
  // Needed for printing

  textarea,
  .textarea-wordcount {
    display: none !important;
  }

  .textarea-print {
    display: inline-block !important;
    height: auto;
    width: auto;
  }
}

.inline {
  $controls: ('busy', 'colorpicker', 'datepicker', 'switch', 'lookup', 'searchfield', 'timepicker, radio');

  @include inline-control-label($controls);
  @include inline-control($controls);

  .label-text {
    display: block;
  }

  &.inline-switch .label-text {
    &::before,
    &::after {
      margin-left: -40px;
    }
  }
}

// Required Indicator
label,
.label {
  &.required {
    &:not(.inline):not(.checkbox-label) {
      &:not(.accessible)::after {
        @include required-indicator();
      }

      .required-asterisk {
        @include required-indicator();
      }
    }

    .label-text {
      &:not(.accessible)::after {
        @include required-indicator();
      }

      .required-asterisk {
        @include required-indicator();
      }
    }
  }
}

span.required::after {
  @include required-indicator();
}

// Placeholder - Inline help
// for browser support, these need to be
// separate declarations rather than comma-separated
::-webkit-input-placeholder {
  @include placeholder();
}

// Safari requires the `-webkit-text-fill-color` prop, which we
// don't want to use generally because it conflicts.
.is-safari {
  input,
  textarea,
  .searchfield {
    &[disabled] {
      -webkit-text-fill-color: $input-disabled-color;
    }
  }

  .error-message,
  .alert-message,
  .success-message,
  .info-message,
  .custom-icon-message {
    &.truncated {
      .message-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; /* Number of lines to show */
        line-clamp: 1;
        max-height: 1.3em; /* Adjust the max-height to fit the desired number of lines */
        white-space: unset;
      }
    }
  }
}

::-moz-placeholder {
  @include placeholder();
}

:-ms-input-placeholder {
  @include placeholder();
}

::-ms-clear {
  display: none;
}

// Error States
.error {
  color: $error-color;
}

.error-message,
.error-message p,
.popover .error-message p {
  color: $error-text-color;
}

.error::-webkit-input-placeholder {
  color: $error-color;
  opacity: 1;
}

.error::-moz-placeholder {
  color: $error-color;
  opacity: 1;
}

.error:-ms-input-placeholder {
  color: $error-color;
  opacity: 1;
}

// Alert States
.alert,
.alert-message,
.alert-message p {
  color: $alert-color;
}

.alert::-webkit-input-placeholder {
  color: $alert-color;
  opacity: 1;
}

.alert::-moz-placeholder {
  color: $alert-color;
  opacity: 1;
}

.alert:-ms-input-placeholder {
  color: $alert-color;
  opacity: 1;
}

// Success States
.success,
.success-message,
.success-message p {
  color: $success-color;
}

.success::-webkit-input-placeholder {
  color: $success-color;
  opacity: 1;
}

.success::-moz-placeholder {
  color: $success-color;
  opacity: 1;
}

.success:-ms-input-placeholder {
  color: $success-color;
  opacity: 1;
}

// Information States
.info,
.info-message,
.info-message p {
  color: $info-color;
}

.info::-webkit-input-placeholder {
  color: $info-color;
  opacity: 1;
}

.info::-moz-placeholder {
  color: $info-color;
  opacity: 1;
}

.info:-ms-input-placeholder {
  color: $info-color;
  opacity: 1;
}

// Text Selection
::selection {
  background-color: $selected-text-background-color;
  color: $selected-text-color;
}

::-moz-selection {
  background-color: $selected-text-background-color;
  color: $selected-text-color;
}

// Mask component Adjustment Classes
.is-number-mask {
  text-align: right;
}

// Shorter/Legacy Inputs
.field-short,
.form-layout-compact .field {
  font-size: 0;
  margin-bottom: $form-size-field-compact-margin-bottom;
  position: relative;

  input {
    font-size: $input-size-compact-font-size;
    height: $input-size-compact-height;
    margin-bottom: 0;
    padding: $input-size-compact-padding;
    resize: none;
  }

  textarea:not(.editable) {
    font-size: $input-size-compact-font-size;
    line-height: 1.6rem;
    min-height: $textarea-size-compact-height;
    padding: 5px;
  }

  &:last-child:not(:only-child) {
    margin-bottom: 0;
  }

  .error-message .message-text {
    font-size: $label-size-compact-font-size;
  }

  .icon-error,
  .icon-success {
    height: 14px;
    margin-left: -1px;
    margin-top: 5px;
    top: auto;
    width: 18px;
  }

  .icon-error.lower-opacity {
    opacity: 0.3;
    z-index: -1;
  }

  ::-webkit-input-placeholder {
    font-size: $input-size-compact-font-size;
  }

  ::-moz-placeholder {
    font-size: $input-size-compact-font-size;
  }

  :-ms-input-placeholder {
    font-size: $input-size-compact-font-size;
  }
}

.field-large,
.form-layout-large .field {
  input {
    height: $input-size-regular-height + 0.6;
    padding: 0 16px;
  }
}

.is-firefox {
  .field-short,
  .form-layout-compact .field {
    input:not(.spinbox) {
      padding-block-start: 0;
    }
  }
}

.field-short {
  input {
    text-align: left;
    width: $field-sm;
  }

  .icon-error,
  .icon-success {
    margin-inline-start: -25px;
    margin-top: 7px;
    top: auto;
  }

  label {
    display: inline-block;
    font-size: $label-size-compact-font-size;
    padding-right: 10px;
    padding-top: 5px;
    text-align: right;
    vertical-align: top;
    width: $field-sm;

    ~ .error-message {
      left: $field-sm;
    }
  }
}

// Field stacked optionally stacks the label
.field-stacked {
  label:not(.radio-label) {
    display: block;
    padding-right: 0;
    padding-top: 0 !important;
    text-align: initial;
    width: auto;

    ~ .error-message {
      left: 0;
    }
  }

  .datepicker,
  .timepicker {
    width: 150px;
  }

  input {
    width: 300px;
  }
}

// Sets fields to compact at the form level
.form-layout-compact {
  .field {
    margin-bottom: $form-size-field-compact-margin-bottom;

    span {
      &.data {
        display: inline;
      }
    }
  }

  label,
  .label {
    font-size: $label-size-compact-font-size;
    margin: $label-size-compact-margin;
  }

  label.inline .checkbox ~ .label-text,
  .checkbox-label {
    line-height: $label-size-compact-font-size;
  }

  .field.field-checkbox {
    margin-bottom: $form-size-field-compact-margin-bottom;
  }

  .field:not(.field-checkbox) + .field.field-checkbox {
    margin-bottom: $form-size-field-compact-margin-bottom - 2;
  }
}

.field-short {
  margin-bottom: $form-size-field-compact-margin-bottom;

  label,
  .label {
    font-size: $label-size-compact-font-size;
    margin: $label-size-compact-margin;
  }

  &.field-checkbox {
    margin-block: $input-field-checkbox-margin-block-sm;
  }
}

// Field Sizes
.input-lg,
.colorpicker-container .input-lg.colorpicker,
.field-short .input-lg,
.form-layout-compact .field .input-lg {
  width: $field-lg;
}

.input-md,
.colorpicker-container .input-md.colorpicker,
.input-md.datepicker,
.field-short .input-md,
.form-layout-compact .field .input-md {
  width: $field-md;
}

.input-mm,
.colorpicker-container .input-mm.colorpicker,
.input-mm.datepicker,
.field-short .input-mm,
.form-layout-compact .field .input-mm {
  width: $field-mm;
}

.input-sm,
.colorpicker-container .input-sm.colorpicker,
.field-short .input-sm,
.form-layout-compact .field .input-sm {
  width: $field-sm;
}

.input-xs,
.colorpicker-container .input-xs.colorpicker,
.field-short .input-xs,
.form-layout-compact .field .input-xs {
  width: $field-xs;
}

.input-full {
  width: $field-full;
}

// Info Field
.field-info {
  $this-icon-width: 15px;

  display: block;
  font-size: $ids-size-font-sm;
  line-height: 2rem;
  margin-bottom: 12px;
  margin-top: 7px;
  max-width: 300px;
  min-height: 35px;
  position: relative;

  .icon {
    height: 15px;
    left: 0;
    position: absolute;
    top: 0;
    width: $this-icon-width;
  }

  .icon-info-field {
    position: static;
  }

  + .error-message {
    margin-top: -12px;
  }

  .message-text {
    font-size: inherit;
    line-height: 14px;
    margin-bottom: 16px;
    margin-top: -2px;
    max-width: 267px;
    padding-left: $this-icon-width + 5;
  }
}

.error-message,
.alert-message,
.success-message,
.info-message,
.custom-icon-message,
.field-info {
  &.truncated {
    .message-text {
      max-width: 300px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  &.full-width {
    max-width: 100%;
    padding: 0;

    .message-text {
      max-width: calc(100% - 20px);
    }

    + .full-width {
      margin-top: 7px;
    }
  }

  .message-text {
    line-height: 18px;
  }
}

.compound-field > .field {
  .error-message,
  .alert-message,
  .success-message,
  .info-message,
  .custom-icon-message {
    max-width: $field-md;

    .message-text {
      max-width: calc(100% - 20px);
    }
  }

  .input-xs ~ .error-message,
  .input-xs ~ .alert-message,
  .input-xs ~ .success-message,
  .input-xs ~ .info-message,
  .input-xs ~ .custom-icon-message {
    max-width: $field-xs;
  }

  .input-sm ~ .error-message,
  .input-sm ~ .alert-message,
  .input-sm ~ .success-message,
  .input-sm ~ .info-message,
  .input-sm ~ .custom-icon-message {
    max-width: $field-sm;
  }

  .input-mm ~ .error-message,
  .input-mm ~ .alert-message,
  .input-mm ~ .success-message,
  .input-mm ~ .info-message,
  .input-mm ~ .custom-icon-message {
    max-width: $field-mm;
  }

  .input-md ~ .error-message,
  .input-md ~ .alert-message,
  .input-md ~ .success-message,
  .input-md ~ .info-message,
  .input-md ~ .custom-icon-message {
    max-width: $field-md;
  }

  .input-lg ~ .error-message,
  .input-lg ~ .alert-message,
  .input-lg ~ .success-message,
  .input-lg ~ .info-message,
  .input-lg ~ .custom-icon-message {
    max-width: $field-lg;
  }
}

// Error Field
.error-message {
  $this-icon-width: 14px;

  color: $error-color;
  display: block;
  font-size: $ids-size-font-sm;
  line-height: 1.2rem;
  margin-top: 7px;
  max-width: 300px;
  position: relative;

  .icon {
    height: $this-icon-width;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 0;
    width: $this-icon-width;
  }

  .message-text {
    font-size: $label-size-regular-font-size;
    max-width: 280px;
    padding-left: $this-icon-width + 5;
  }
}

// Alert Field
.alert-message {
  $this-icon-width: 14px;

  color: $alert-color;
  display: block;
  font-size: $ids-size-font-sm;
  line-height: 1.2rem;
  margin-top: 7px;
  max-width: 300px;
  position: relative;

  .icon {
    height: $this-icon-width;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 0;
    width: $this-icon-width;
  }

  .message-text {
    font-size: inherit;
    line-height: 15px;
    max-width: 280px;
    padding-left: $this-icon-width + 5;
  }
}

// Success Field
.success-message {
  $this-icon-width: 14px;

  color: $success-color;
  display: block;
  font-size: $ids-size-font-sm;
  line-height: 1.2rem;
  margin-top: 7px;
  max-width: 300px;
  position: relative;

  .icon {
    height: $this-icon-width;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 0;
    width: $this-icon-width;
  }

  .message-text {
    font-size: inherit;
    line-height: 15px;
    max-width: 280px;
    padding-left: $this-icon-width + 5;
  }
}

// Information Field
.custom-icon-message,
.info-message {
  $this-icon-width: 14px;

  color: $info-color;
  display: block;
  font-size: $ids-size-font-sm;
  line-height: 1.2rem;
  margin-top: 7px;
  max-width: 300px;
  position: relative;

  .icon {
    height: $this-icon-width;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 0;
    width: $this-icon-width;
  }

  .message-text {
    font-size: inherit;
    line-height: 15px;
    max-width: 280px;
    padding-left: $this-icon-width + 5;
  }
}

.column,
.columns {
  input.has-actions:not(.datepicker),
  textarea.has-actions {
    max-width: $field-md;
    width: calc(100% - 40px);

    &.textarea {
      max-width: $textarea-size;

      ~ .btn-tertiary {
        margin-left: 2px;
        position: absolute;
        top: calc(50% - 14px);
      }
    }

    &.input-xs {
      max-width: $field-xs;
    }

    &.input-sm {
      max-width: $field-sm;
    }

    &.input-lg {
      max-width: $field-lg;
    }

    &.input-full {
      max-width: calc(100% - 40px);
    }

    ~ .btn-tertiary {
      min-width: 30px;
      width: 30px;
    }

    ~ a.btn-tertiary {
      display: inline;
      padding: 0 5px;
    }
  }

  input.has-actions.datepicker {
    &.input-xs {
      max-width: $field-xs;
      width: calc(100% - 40px);
    }

    &.input-sm {
      max-width: $field-sm;
      width: calc(100% - 40px);
    }

    &.input-mm {
      max-width: $field-mm;
      width: calc(100% - 40px);
    }

    &.input-md {
      max-width: $field-md;
      width: calc(100% - 40px);
    }

    &.input-lg {
      max-width: $field-lg;
      width: calc(100% - 40px);
    }

    &.input-full {
      max-width: calc(100% - 40px);
      width: calc(100% - 40px);
    }

    ~ a.btn-tertiary {
      display: inline;
      padding: 0 5px;
    }
  }

  .field > .checkbox-label.top-margin {
    margin-top: 30px;
  }

  .field-checkbox span.label {
    margin-top: 10px;
  }
}

.has-actions-wrapper {
  margin-right: -40px;
  width: $field-md + 40;

  &.xs {
    width: $field-xs + 40;
  }

  &.sm {
    width: $field-sm + 40;
  }

  &.lg {
    width: $field-lg + 40;
  }

  ~ a.btn-tertiary {
    display: inline;
    padding: 0 5px;
  }
}

// RTL Styles
html[dir='rtl'] {
  .field-info,
  .error-message,
  .alert-message,
  .info-message {
    .icon {
      left: auto;
    }

    .message-text {
      padding-left: inherit;
      padding-right: 19px;
    }
  }

  .field-short label ~ .error-message {
    left: initial;
    right: 150px;
  }

  .field-short.field-stacked label ~ .error-message {
    right: initial;
  }

  label {
    &.required {
      &:not(.inline):not(.checkbox-label) {
        .required-asterisk {
          padding-inline-start: 5px;
        }
      }
    }
  }

  // Field stacked optionally stacks the label
  .field-short.field-stacked {
    label:not(.radio-label) {
      text-align: right;
    }
  }

  input,
  textarea {
    text-align: right;

    &.error {
      padding-right: 10px;
    }
  }

  // Required Indicator
  label.required::after,
  .label.required::after {
    left: auto;
    right: 3px;
  }

  // Mask component Adjustment Classes
  .is-number-mask {
    text-align: left;
  }

  [data-mask-mode='number'].spinbox {
    text-align: center;
  }

  [data-clearable='true'] {
    padding-left: 32px;
    padding-right: 10px;

    & + .icon.close {
      margin-right: -30px;
      right: auto;
    }
  }

  .field-short {
    .icon-error,
    .icon-success {
      height: 14px;
      margin-left: inherit;
      right: 4px;
      top: auto;
      width: 18px;
    }

    label:not(.radio-label) {
      padding-left: 10px;
      padding-right: inherit;
      text-align: left;
    }
  }

  .inline.inline-switch .label-text {
    &::before,
    &::after {
      margin-left: inherit;
      margin-right: -40px;
    }
  }

  .compound-field {
    > .field,
    > .field-short {
      .error-message .message-text {
        float: right;
      }
    }
  }
}

// When on smaller form factors make 400px fields go down to medium size
@include respond-to(phone) {
  .input-lg,
  .field-short .input-lg {
    width: $field-md;
  }
}

@include respond-to(phone) {
  .column .field > .checkbox-label.top-margin,
  .columns .field > .checkbox-label.top-margin {
    margin-bottom: 5px;
    margin-top: -5px;
  }

  .column .field-checkbox span.label,
  .columns .field-checkbox span.label {
    margin-top: -22px;
  }
}

//when on smaller form factors make 300px fields go down to small-medium size
@include respond-to(phone) {
  .input-md {
    width: $field-mm;
  }
}