@awsui/components-react/input/styles.scoped.css

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

._input_2rhyz_1mpw4_7:not(#\9){
  border-collapse:separate;
  border-spacing:0;
  caption-side:top;
  cursor:auto;
  direction:ltr;
  empty-cells:show;
  font-family:serif;
  font-size:medium;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  font-stretch:normal;
  line-height:normal;
  hyphens:none;
  letter-spacing:normal;
  list-style:disc outside none;
  tab-size:8;
  text-align:left;
  text-align-last:auto;
  text-indent:0;
  text-shadow:none;
  text-transform:none;
  visibility:visible;
  white-space:normal;
  widows:2;
  word-spacing:normal;
  box-sizing:border-box;
  font-size:1.4rem;
  font-size:var(--size-font-body-100-1S0qZw, 1.4rem);
  line-height:2.2rem;
  line-height:var(--size-lineHeight-body-100-2aIKVt, 2.2rem);
  color:#16191f;
  color:var(--color-text-body-default-2ZjSsg, #16191f);
  font-weight:400;
  font-family:"Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
  padding:0.4rem 0.8rem;
  padding:var(--space-scaled-xxs-wz9S8K, 0.4rem) var(--space-xs-qJuxzO, 0.8rem);
  color:#16191f;
  color:var(--color-text-body-default-2ZjSsg, #16191f);
  width:100%;
  cursor:text;
  box-sizing:border-box;
  background-color:#ffffff;
  background-color:var(--color-background-input-default-2k-l2Z, #ffffff);
  border-radius:2px;
  border:1px solid #aab7b8;
  border:1px solid var(--color-border-input-default-2xktd9, #aab7b8);
  font-size:1.4rem;
  font-size:var(--size-font-body-100-1S0qZw, 1.4rem);
  line-height:2.2rem;
  line-height:var(--size-lineHeight-body-100-2aIKVt, 2.2rem);
  height:3.2rem;
  height:var(--size-vertical-input-3_q1V_, 3.2rem);
}
._input_2rhyz_1mpw4_7._input-readonly_2rhyz_1mpw4_27:not(#\9){
  background-color:#ffffff;
  background-color:var(--color-background-input-default-2k-l2Z, #ffffff);
  border:1px solid #eaeded;
  border:1px solid var(--color-border-input-disabled-2FoT5u, #eaeded);
}
._input_2rhyz_1mpw4_7:not(#\9)::-webkit-input-placeholder{
  color:#aab7b8;
  color:var(--color-text-input-placeholder-2xktd9, #aab7b8);
  font-style:italic;
}
._input_2rhyz_1mpw4_7:not(#\9)::-ms-input-placeholder{
  color:#aab7b8;
  color:var(--color-text-input-placeholder-2xktd9, #aab7b8);
  font-style:italic;
}
._input_2rhyz_1mpw4_7:not(#\9)::-moz-placeholder{
  color:#aab7b8;
  color:var(--color-text-input-placeholder-2xktd9, #aab7b8);
  font-style:italic;
  opacity:1;
}
._input_2rhyz_1mpw4_7:not(#\9):-moz-placeholder{
  color:#aab7b8;
  color:var(--color-text-input-placeholder-2xktd9, #aab7b8);
  font-style:italic;
  opacity:1;
}
._input_2rhyz_1mpw4_7:not(#\9):focus{
  outline:2px dotted transparent;
  border:1px solid #00a1c9;
  border:1px solid var(--color-border-item-focused-RH7L5U, #00a1c9);
  border-radius:2px;
  box-shadow:0 0 0 1px #00a1c9;
  box-shadow:0 0 0 1px var(--color-border-item-focused-RH7L5U, #00a1c9);
}
._input_2rhyz_1mpw4_7:not(#\9):disabled{
  background-color:#eaeded;
  background-color:var(--color-background-input-disabled-p5fVsz, #eaeded);
  border:1px solid #eaeded;
  border:1px solid var(--color-border-input-disabled-2FoT5u, #eaeded);
  color:#879596;
  color:var(--color-text-input-disabled-18f9uV, #879596);
  cursor:auto;
  cursor:default;
}
._input_2rhyz_1mpw4_7:not(#\9):-ms-input-placeholder{
  color:#aab7b8;
  color:var(--color-text-input-placeholder-2xktd9, #aab7b8);
  font-style:italic;
}
._input_2rhyz_1mpw4_7:not(#\9):invalid{
  box-shadow:none;
}
._input_2rhyz_1mpw4_7._input-invalid_2rhyz_1mpw4_69:not(#\9){
  color:#d13212;
  color:var(--color-text-status-error-1SZf5y, #d13212);
  border-color:#d13212;
  border-color:var(--color-text-status-error-1SZf5y, #d13212);
  padding-left:calc( 0.8rem - (4px - 1px) );
  padding-left:calc( var(--space-xs-qJuxzO, 0.8rem) - (4px - 1px) );
  border-left-width:4px;
}
._input_2rhyz_1mpw4_7._input-invalid_2rhyz_1mpw4_69._input-has-icon-left_2rhyz_1mpw4_75:not(#\9){
  padding-left:calc( calc(1.6rem + (2 * 0.8rem)) - (4px - 1px) );
  padding-left:calc( calc(var(--size-icon-normal-3o9QS_, 1.6rem) + (2 * var(--space-xs-qJuxzO, 0.8rem))) - (4px - 1px) );
}
._input_2rhyz_1mpw4_7._input-type-search_2rhyz_1mpw4_78:not(#\9){
  box-sizing:border-box;
  -webkit-appearance:textfield;
}
._input_2rhyz_1mpw4_7._input-type-search_2rhyz_1mpw4_78:not(#\9)::-ms-clear{
  display:none;
}
._input_2rhyz_1mpw4_7._input-type-search_2rhyz_1mpw4_78:not(#\9)::-webkit-search-decoration{
  -webkit-appearance:none;
}
._input_2rhyz_1mpw4_7._input-type-search_2rhyz_1mpw4_78:not(#\9)::-webkit-search-cancel-button{
  display:none;
}
._input_2rhyz_1mpw4_7._input-has-icon-left_2rhyz_1mpw4_75:not(#\9){
  padding-left:calc(1.6rem + (2 * 0.8rem));
  padding-left:calc(var(--size-icon-normal-3o9QS_, 1.6rem) + (2 * var(--space-xs-qJuxzO, 0.8rem)));
}
._input_2rhyz_1mpw4_7._input-has-icon-right_2rhyz_1mpw4_94:not(#\9){
  padding-right:calc(1.6rem + (2 * 0.8rem));
  padding-right:calc(var(--size-icon-normal-3o9QS_, 1.6rem) + (2 * var(--space-xs-qJuxzO, 0.8rem)));
}
._input_2rhyz_1mpw4_7._input-has-no-border-radius_2rhyz_1mpw4_97:not(#\9){
  border-radius:0;
}

._input-container_2rhyz_1mpw4_101:not(#\9){
  display:flex;
  position:relative;
}

._input-icon_2rhyz_1mpw4_106:not(#\9){
  position:absolute;
}
._input-icon_2rhyz_1mpw4_106:not(#\9):not(._input-icon-hoverable_2rhyz_1mpw4_109){
  pointer-events:none;
}

._input-icon-left_2rhyz_1mpw4_113:not(#\9){
  left:0.8rem;
  left:var(--space-xs-qJuxzO, 0.8rem);
  top:calc(50% - 2.2rem / 2);
  top:calc(50% - var(--size-lineHeight-body-100-2aIKVt, 2.2rem) / 2);
}

._input-icon-right_2rhyz_1mpw4_118:not(#\9){
  right:0.8rem;
  right:var(--space-xs-qJuxzO, 0.8rem);
  top:calc(50% - 2.2rem / 2);
  top:calc(50% - var(--size-lineHeight-body-100-2aIKVt, 2.2rem) / 2);
  color:#545b64;
  color:var(--color-text-interactive-default-3MrzkF, #545b64);
}

._input-icon-hoverable_2rhyz_1mpw4_109:not(#\9){
  cursor:pointer;
}
._input-icon-hoverable_2rhyz_1mpw4_109:not(#\9):hover{
  color:#16191f;
  color:var(--color-text-interactive-hover-2ZjSsg, #16191f);
}