@import 'part:@lyra/base/theme/variables-style';

.root {
  appearance: none;
  border: var(--input-border-size) solid var(--input-border-color);
  display: block;
  width: 100%;
  outline: none;
  line-height: var(--input-line-height);
  font-size: inherit;
  box-sizing: border-box;
  padding: var(--input-padding-horizontal) var(--input-padding-vertical);
  border-radius: var(--input-border-radius);
  transition: all 0.1s linear;
  color: var(--input-color);
  background-color: var(--input-bg);
  box-shadow: var(--input-box-shadow);

  @nest &:disabled {
    opacity: 0.5;
  }
}

.textInput {
  composes: root;

  @nest &:read-only {
    opacity: 0.5;
  }

  @nest &:not(:disabled) {
    @nest &:not(:read-only) {
      @nest &:hover {
        box-shadow: var(--input-box-shadow--hover);
        border-color: var(--input-border-color-hover);
      }

      @nest &:focus, &:focus-within {
        box-shadow: var(--input-box-shadow--focus);
        border-color: var(--input-border-color-focus);
      }

      @nest &:active {
        border-color: var(--input-border-color-active);
      }

      @nest &:invalid {
        border-color: var(--input-border-color-invalid);
        background-color: var(--input-bg-error);
        box-shadow: var(--input-box-shadow--error);
      }
    }
  }
}