@adobe/spectrum-css/dist/components/inputgroup/colorStops/lightest.css

The Spectrum CSS top-level backwards compatible package

.spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(55, 142, 240);
      }
.spectrum-InputGroup.is-focused:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) ~ .spectrum-FieldButton {
          border-color: rgb(55, 142, 240);
        }
.spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) {
        border-color: rgb(211, 211, 211);
      }
.spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid) ~ .spectrum-FieldButton {
          border-color: rgb(211, 211, 211);
        }
.spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):focus {
          border-color: rgb(55, 142, 240);
        }
.spectrum-InputGroup:hover:not(.is-invalid):not(.is-focused) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):focus ~ .spectrum-FieldButton {
            border-color: rgb(55, 142, 240);
          }
.spectrum-InputGroup-field:focus ~ .spectrum-FieldButton {
    border-color: rgb(55, 142, 240);
  }
.spectrum-InputGroup-field:focus.is-invalid ~ .spectrum-FieldButton, .spectrum-InputGroup-field:focus:invalid ~ .spectrum-FieldButton {
      border-color: rgb(227, 72, 80);
    }
.spectrum-InputGroup-field.focus-ring ~ .spectrum-FieldButton {
    box-shadow: 0 0 0 1px rgb(55, 142, 240);
  }
.spectrum-InputGroup-field.focus-ring.is-invalid ~ .spectrum-FieldButton, .spectrum-InputGroup-field.focus-ring:invalid ~ .spectrum-FieldButton {
      box-shadow: 0 0 0 1px rgb(227, 72, 80);
    }
.spectrum-InputGroup--quiet .spectrum-FieldButton,
    .spectrum-InputGroup--quiet .spectrum-FieldButton:hover,
    .spectrum-InputGroup--quiet .spectrum-FieldButton:focus,
    .spectrum-InputGroup--quiet .spectrum-FieldButton:active,
    .spectrum-InputGroup--quiet .spectrum-FieldButton.is-selected,
    .spectrum-InputGroup--quiet .spectrum-FieldButton:invalid,
    .spectrum-InputGroup--quiet .spectrum-FieldButton.is-invalid,
    .spectrum-InputGroup--quiet .spectrum-FieldButton:disabled,
    .spectrum-InputGroup--quiet .spectrum-FieldButton:disabled:hover {
      border-color: rgb(234, 234, 234);
    }
.spectrum-InputGroup--quiet:hover:not(.is-invalid) .spectrum-InputGroup-field:not(:disabled):not(.is-invalid):not(:focus) ~ .spectrum-FieldButton {
        border-color: rgb(211, 211, 211);
      }
.spectrum-InputGroup--quiet .spectrum-InputGroup-field.is-invalid ~ .spectrum-FieldButton, .spectrum-InputGroup--quiet .spectrum-InputGroup-field:invalid ~ .spectrum-FieldButton {
        border-color: rgb(227, 72, 80);
      }
.spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus ~ .spectrum-FieldButton {
        box-shadow: 0 1px 0 rgb(55, 142, 240);
        border-color: rgb(55, 142, 240);
      }
.spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus.is-invalid ~ .spectrum-FieldButton, .spectrum-InputGroup--quiet .spectrum-InputGroup-field:focus:invalid ~ .spectrum-FieldButton {
          box-shadow: 0 1px 0 rgb(227, 72, 80);
          border-color: rgb(227, 72, 80);
        }
.spectrum-Datepicker--range .spectrum-InputGroup-field.focus-ring {
      box-shadow: none !important;
    }
.spectrum-Datepicker--range .spectrum-InputGroup-field[disabled] ~ .spectrum-Datepicker--rangeDash {
        color: rgb(188, 188, 188);
      }
.spectrum-Datepicker--range .focus-ring ~ .spectrum-Datepicker-focusRing {
      box-shadow: 0 0 0 1px rgb(55, 142, 240);
    }
.spectrum-Datepicker--range .focus-ring:invalid ~ .spectrum-FieldButton, .spectrum-Datepicker--range .focus-ring.is-invalid ~ .spectrum-FieldButton {
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.spectrum-Datepicker--range .focus-ring:invalid ~ .spectrum-Datepicker-focusRing, .spectrum-Datepicker--range .focus-ring.is-invalid ~ .spectrum-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.spectrum-Datepicker--range.is-invalid .spectrum-InputGroup-field {
      border-color: rgb(227, 72, 80) !important;
    }
.spectrum-Datepicker--range.is-invalid .focus-ring ~ .spectrum-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.spectrum-Datepicker--range.is-invalid .focus-ring ~ .spectrum-FieldButton {
        border-color: rgb(227, 72, 80);
        box-shadow: 0 0 0 1px rgb(227, 72, 80);
      }
.spectrum-Datepicker--range.is-invalid .spectrum-FieldButton {
      border-color: rgb(227, 72, 80);
    }
.spectrum-Datepicker--range.is-invalid .spectrum-FieldButton.is-invalid.focus-ring {
          border-color: rgb(227, 72, 80);
          box-shadow: 0 0 0 1px rgb(227, 72, 80);
        }
.spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused .spectrum-Datepicker-focusRing {
        box-shadow: 0 0 0 1px rgb(55, 142, 240);
      }
.spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-FieldButton {
          box-shadow: none;
          border-color: rgb(227, 72, 80);
        }
.spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-FieldButton.is-invalid.focus-ring {
              box-shadow: 0 2px 0 0 rgb(227, 72, 80);
            }
.spectrum-Datepicker--range.spectrum-InputGroup--quiet.is-focused.is-invalid .spectrum-Datepicker-focusRing {
          box-shadow: 0 0 0 1px rgb(227, 72, 80);
        }