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

.container {
  position: relative;
  border: 10px solid cyan;
}

.hasError {
  border: 10px solid red;
}

.input {
  position: relative;
  z-index: 1;

  @nest .disabled & {
    background-color: red;
  }
}

.inputOnError {
  composes: error from 'part:@lyra/base/theme/forms/text-input-style';
}

.isClearable {
  padding-right: 2em;
}

.clearButton {
  z-index: 1;
  top: 0.35em;
  right: 0.1em;
  font-size: 5em;

  @nest & svg {
    color: inherit;
  }
}

.isDisabled {
  opacity: 0.4;
}