.br-input {
  /*** Estados ***/
  position: relative;
}
.br-input.success input, .br-input[data-success] input {
  border: 2px solid var(--color-success);
}
.br-input.success .feedback.color-success, .br-input[data-success] .feedback.color-success {
  align-items: center;
  background: var(--color-success);
  color: var(--color-secondary-01) !important;
  display: inline-flex;
  height: 35px;
  margin-bottom: var(--spacing-scale-base);
  padding: 5px;
}
.br-input.danger input, .br-input[data-danger] input {
  border: 2px solid var(--color-danger);
}
.br-input.danger .feedback.color-danger, .br-input[data-danger] .feedback.color-danger {
  align-items: center;
  background: var(--color-danger);
  color: var(--color-secondary-01) !important;
  display: inline-flex;
  height: 35px;
  margin-bottom: var(--spacing-scale-base);
  padding: 5px;
}
.br-input.warning input, .br-input[data-warning] input {
  border: 2px solid var(--color-warning);
}
.br-input.warning .feedback.color-warning, .br-input[data-warning] .feedback.color-warning {
  align-items: center;
  background: var(--color-warning);
  color: var(--color-secondary-01) !important;
  display: inline-flex;
  height: 35px;
  margin-bottom: var(--spacing-scale-base);
  padding: 5px;
}
.br-input.warning .feedback.color-warning, .br-input[data-warning] .feedback.color-warning {
  color: var(--color-secondary-08) !important;
}
.br-input.info input, .br-input[data-info] input {
  border: 2px solid var(--color-info);
}
.br-input.info .feedback.color-info, .br-input[data-info] .feedback.color-info {
  align-items: center;
  background: var(--color-info);
  color: var(--color-secondary-01) !important;
  display: inline-flex;
  height: 35px;
  margin-bottom: var(--spacing-scale-base);
  padding: 5px;
}
.br-input label {
  display: inline-block;
  padding-bottom: var(--spacing-scale-half);
}
.br-input.has-icon .br-button.circle {
  border-bottom: var(--spacing-scale-base);
  border-right: var(--spacing-scale-half);
  border-top: var(--spacing-scale-base);
}
.br-input input {
  background: var(--bg-color);
  border: 1px solid #888;
  border-radius: 6px;
  color: var(--color-secondary-07);
  display: block;
  font-size: var(--font-size-scale-up-01);
  font-weight: var(--font-weight-medium);
  height: var(--input-size);
  padding-left: var(--spacing-scale-2x);
  padding-right: var(--spacing-scale-5x);
  width: 100%;
  --input-small: 48px;
  --input-medium: 40px;
  --input-large: 32px;
  --input-size: var(--input-medium);
}
.br-input input::placeholder {
  color: var(--text-color);
  font-size: var(--font-size-scale-base);
  font-style: italic;
  font-weight: var(--font-weight-regular);
  opacity: 0.75;
}
.br-input input:not(:disabled):not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-input input:not(:disabled):not(:disabled):active {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-input input:not(:disabled):focus {
  outline: none;
}
.br-input input:not(:disabled).focus-visible, .br-input input:not(:disabled):focus-visible {
  outline-color: var(--focus-color);
  outline-offset: var(--focus-offset);
  outline-style: var(--focus-style);
  outline-width: var(--focus-width);
}
.br-input input:not(:disabled):focus, .br-input input:not(:disabled):focus-visible, .br-input input:not(:disabled).focus-visible {
  border-color: var(--focus-color);
  box-shadow: 0 0 0 var(--surface-width-md) var(--focus-color);
  outline: none;
}
.br-input input.small, .br-input input[data-small] {
  --input-size: var(--input-small);
}
.br-input input.medium, .br-input input[data-medium] {
  --input-size: var(--input-medium);
}
.br-input input.large, .br-input input[data-large] {
  --input-size: var(--input-large);
}
.br-input input.disabled, .br-input input[disabled] {
  background-color: var(--color-secondary-03);
  border: 1px solid var(--color-secondary-06);
  color: var(--color-secondary-06);
}
.br-input input.disabled ~ button.icon, .br-input input[disabled] ~ button.icon {
  color: var(--color-secondary-06);
  cursor: not-allowed;
}
.br-input input.disabled ~ .help, .br-input input[disabled] ~ .help {
  display: none;
}
.br-input input + .br-button {
  position: absolute;
  right: var(--spacing-scale-half);
  top: 28px;
}
.br-input button:not(.br-button) {
  background-color: transparent;
}
.br-input button.icon {
  --focus-offset: calc(var(--spacing-scale-half) * -1);
  background: transparent;
  border: 0;
  bottom: 0;
  color: var(--interactive);
  font-size: 1rem;
  height: 40px;
  margin: 0;
  min-width: 0;
  outline: none;
  padding: 0 var(--spacing-scale-2x);
  position: absolute;
  right: 0;
  top: 1.5em;
  width: auto;
}
.br-input button.icon:not(:disabled):hover {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--hover)), rgba(var(--interactive-rgb), var(--hover)));
}
.br-input button.icon:not(:disabled):active {
  background-image: linear-gradient(rgba(var(--interactive-rgb), var(--pressed)), rgba(var(--interactive-rgb), var(--pressed)));
}
.br-input button.icon:focus {
  outline: none;
}
.br-input button.icon.focus-visible, .br-input button.icon:focus-visible {
  outline-color: var(--focus-color);
  outline-offset: var(--focus-offset);
  outline-style: var(--focus-style);
  outline-width: var(--focus-width);
}
.br-input button.icon img {
  max-width: 24px;
  min-width: 24px;
  transform: translate(0, -4px);
}
.br-input ~ .help {
  font-size: var(--font-size-scale-down-01);
}
.br-input.is-filter, .br-input[data-filter] {
  align-items: center;
  display: flex;
  justify-content: flex-start;
}
.br-input.is-filter label, .br-input[data-filter] label {
  margin-right: var(--spacing-scale-2x);
  white-space: nowrap;
}
.br-input.is-filter input, .br-input[data-filter] input {
  min-height: 32px;
}

/*# sourceMappingURL=input.css.map*/