+.devtools-textinput:focus,
+.devtools-searchinput:focus,
+.devtools-filterinput:focus {
+ border-color: var(--theme-focus-border-color-textbox);
+/* box-shadow: var(--theme-focus-box-shadow-textbox);*/
+ transition: all 0.2s ease-in-out;
+ outline: none;
+}
+
+/* Don't add 'double spacing' for inputs that are at beginning / end
+ of a toolbar (since the toolbar has it's own spacing). */
+.devtools-toolbar > .devtools-textinput:first-child,
+.devtools-toolbar > .devtools-searchinput:first-child,
+.devtools-toolbar > .devtools-filterinput:first-child {
+}
+.devtools-toolbar > .devtools-textinput:last-child,
+.devtools-toolbar > .devtools-searchinput:last-child,
+.devtools-toolbar > .devtools-filterinput:last-child {
+}
+.devtools-toolbar > .devtools-searchbox:first-child {
+}
+.devtools-toolbar > .devtools-searchbox:last-child {
+}
+
+.devtools-rule-searchbox {
+ -moz-box-flex: 1;
+ width: 100%;
+/* font: inherit;*/
+}
+
+.devtools-rule-searchbox[filled] {
+ background-color: var(--searchbox-background-color);
+ border-color: var(--searchbox-border-color);
+}
+
+.devtools-style-searchbox-no-match {
+ background-color: var(--searchbox-no-match-background-color) !important;
+ border-color: var(--searchbox-no-match-border-color) !important;
+}
+
+.devtools-searchinput-clear {
+ position: absolute;
+ top: 3.5px;
+ offset-inline-end: 7px;
+ padding: 0;
+ border: 0;
+ width: 16px;
+ height: 16px;
+ background-position: 0 0;
+ background-repeat: no-repeat;
+ background-color: transparent;
+}
+
+.devtools-searchinput-clear:dir(rtl) {
+ right: unset;
+ left: 7px;
+}
+
+.devtools-searchinput-clear {
+ background-image: url("chrome://devtools/skin/images/search-clear.svg");
+}
+
+.devtools-style-searchbox-no-match + .devtools-searchinput-clear {
+ background-image: url("chrome://devtools/skin/images/search-clear-failed.svg") !important;
+}
+
+.devtools-searchinput-clear:hover {
+ background-position: -16px 0;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear,
+.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear {
+ list-style-image: url("chrome://devtools/skin/images/search-clear.svg");
+ -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover,
+.devtools-filterinput > .textbox-input-box > .textbox-search-icons > .textbox-search-clear:hover {
+ -moz-image-region: rect(0, 32px, 16px, 16px);
+}
+
+/* Throbbers */
+
+.devtools-throbber::before {
+ content: "";
+ display: inline-block;
+ vertical-align: bottom;
+ margin-inline-end: 0.5em;
+ width: 1em;
+ height: 1em;
+ border: 2px solid currentColor;
+ border-right-color: transparent;
+ border-radius: 50%;
+ animation: 1.1s linear throbber-spin infinite;
+}
+
+@keyframes throbber-spin {
+ from {
+ transform: none;
+ }
+ to {
+ transform: rotate(360deg);
+ }