@jetbrains/ring-ui/components/input/input.scss

@import "../global/global";

// Input
//
// Markup:
// <input class="{$modifiers} ring-input" type="text" placeholder="placeholder">
//
// :disabled            - Disabled state, also available as the `.ring-input_disabled` class name.
// :active              - Active state, also available as the `.ring-input_active` class name.
// :focus               - Focus state, also available as the `.ring-input_focus` class name.
// .ring-input_correct  - The entered value is correct.
// .ring-input_error    - The entered value is incorrect.

@mixin focused_input {
  border-color: var(--ring-main-color);
  outline: 0;
}

.ring-input {
  appearance: none;
  border-radius: 0;
  box-sizing: border-box;
  margin: 0;
  padding-right: $ring-unit/ 2;
  padding-left: $ring-unit / 2;
  padding-bottom: 3px;
  border: 1px solid var(--ring-borders-color);
  background-color: var(--ring-content-background-color);

  @include ring-font;
  line-height: 20px;
  height: 3*$ring-unit;
  width: 100%;

  &:active, &:focus, &_active, &_focus {
    @include focused_input;
  }

  &_correct {
    border-color: var(--ring-success-color);
  }

  &_error {
    border-color: var(--ring-error-color);
  }

  &_no-resize {
    resize: none;
  }

  &_filter-popup {
    min-width: 200px;
    width: 100%;
  }

  &_material {
    padding-left: 0;
    padding-right: 0;

    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
}

// Using double selector to enforce specificity, that is hard to express with &
.ring-input.ring-input:disabled, .ring-input.ring-input[disabled], .ring-input.ring-input_disabled {
  @include ring-input-disabled;
}

textarea.ring-input {
  height: auto;
  min-height: 8*$ring_unit;
  resize: vertical;
  vertical-align: top; // https://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers

  &::placeholder {
    color: var(--ring-disabled-color);
  }
}