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

.root {
  appearance: none;
  border: var(--input-border-size) solid var(--input-border-color);
  width: 100%;
  max-width: 100%;
  outline: 0;
  box-sizing: border-box;
  resize: vertical;
  padding: 0.5em;
  font-size: 1em;
  box-shadow: var(--input-box-shadow--hover);
  background-color: var(--input-bg);
  border-radius: var(--input-border-radius);

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

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

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

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

  @nest &:disabled {
    background-color: var(--input-bg-disabled);
  }

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