resources/lib/ooui/oojs-ui-widgets-wikimediaui.css

   1 /*!
   2  * OOUI v0.51.4
   3  * https://www.mediawiki.org/wiki/OOUI
   4  *
   5  * Copyright 2011–2024 OOUI Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: 2024-12-05T17:34:44Z
  10  */
  11 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ),
  12 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ).oo-ui-widget {
  13   cursor: move;
  14   /* stylelint-disable plugin/no-unsupported-browser-features */
  15   cursor: grab;
  16   /* stylelint-enable plugin/no-unsupported-browser-features */
  17 }
  18 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ):active {
  19   /* stylelint-disable plugin/no-unsupported-browser-features */
  20   cursor: grabbing;
  21   /* stylelint-enable plugin/no-unsupported-browser-features */
  22 }
  23 .oo-ui-draggableElement-handle.oo-ui-widget-disabled,
  24 .oo-ui-widget-disabled .oo-ui-draggableElement-handle {
  25   cursor: default;
  26 }
  27 .oo-ui-draggableElement-placeholder {
  28   opacity: 0.2;
  29 }
  30 .oo-ui-draggableGroupElement-horizontal .oo-ui-draggableElement {
  31   display: inline-block;
  32 }
  33
  34
  35
  36 .oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous > .oo-ui-panelLayout-scrollable {
  37   overflow: hidden;
  38 }
  39 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
  40   width: 100%;
  41   box-sizing: border-box;
  42 }
  43 .oo-ui-bookletLayout-outlinePanel-editable > .oo-ui-outlineSelectWidget {
  44   height: auto;
  45   position: absolute;
  46   top: 0;
  47   left: 0;
  48   right: 0;
  49   bottom: 2.5em;
  50   overflow: auto;
  51   -webkit-overflow-scrolling: touch;
  52 }
  53 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
  54   position: absolute;
  55   bottom: 0;
  56   left: 0;
  57   right: 0;
  58   height: 2.5em;
  59 }
  60 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
  61   padding: 20px;
  62 }
  63 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
  64   border-top: 1px solid var(--border-color-subtle, #c8ccd1);
  65 }
  66 .oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
  67   border-right: 1px solid var(--border-color-subtle, #c8ccd1);
  68 }
  69
  70 .oo-ui-indexLayout {
  71   /* Use two classes to ensure increased specificity over menuLayout */
  72 }
  73 .oo-ui-indexLayout.oo-ui-menuLayout > .oo-ui-menuLayout-menu {
  74   height: auto;
  75 }
  76 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
  77   height: 3em;
  78   white-space: nowrap;
  79 }
  80 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
  81   top: 3em;
  82 }
  83 .oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout[hidden] {
  84   /* stylelint-disable declaration-no-important */
  85   width: 0 !important;
  86   height: 0 !important;
  87   padding: 0 !important;
  88   overflow: hidden !important;
  89   /* stylelint-enable declaration-no-important */
  90 }
  91 .oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
  92   padding: 20px;
  93 }
  94 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
  95   height: 2.64285714em;
  96 }
  97 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
  98   top: 2.64285714em;
  99 }
 100
 101 .oo-ui-copyTextLayout > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
 102   max-width: 50em;
 103 }
 104 .oo-ui-copyTextLayout-multiline-button {
 105   display: block;
 106   max-width: 50em;
 107   margin-top: 0.5em;
 108   /* Float to right of inline help */
 109   float: right;
 110 }
 111
 112 .oo-ui-menuLayout {
 113   top: 0;
 114   left: 0;
 115   right: 0;
 116   bottom: 0;
 117 }
 118 .oo-ui-menuLayout-expanded,
 119 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu,
 120 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
 121   position: absolute;
 122 }
 123 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
 124   z-index: 1;
 125 }
 126 .oo-ui-menuLayout-static.oo-ui-menuLayout-after,
 127 .oo-ui-menuLayout-static.oo-ui-menuLayout-before {
 128   display: table;
 129   width: 100%;
 130 }
 131 .oo-ui-menuLayout-static.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu,
 132 .oo-ui-menuLayout-static.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu,
 133 .oo-ui-menuLayout-static.oo-ui-menuLayout-after > .oo-ui-menuLayout-content,
 134 .oo-ui-menuLayout-static.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
 135   display: table-cell;
 136   vertical-align: top;
 137 }
 138 .oo-ui-menuLayout > .oo-ui-menuLayout-menu,
 139 .oo-ui-menuLayout > .oo-ui-menuLayout-content {
 140   transition-property: height, width, top, left, right, bottom;
 141   transition-duration: 250ms;
 142 }
 143 .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
 144   height: 14.28571429em;
 145   width: 14.28571429em;
 146 }
 147 .oo-ui-menuLayout > .oo-ui-menuLayout-content {
 148   top: 14.28571429em;
 149   left: 14.28571429em;
 150   right: 14.28571429em;
 151   bottom: 14.28571429em;
 152 }
 153 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-menu {
 154   width: 0 !important;
 155   height: 0 !important;
 156   overflow: hidden;
 157 }
 158 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-content {
 159   top: 0 !important;
 160   left: 0 !important;
 161   right: 0 !important;
 162   bottom: 0 !important;
 163 }
 164 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-menu {
 165   width: auto !important;
 166   left: 0;
 167   top: 0;
 168   right: 0;
 169 }
 170 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-content {
 171   right: 0 !important;
 172   bottom: 0 !important;
 173   left: 0 !important;
 174 }
 175 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu {
 176   height: auto !important;
 177   top: 0;
 178   right: 0;
 179   bottom: 0;
 180 }
 181 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-content {
 182   bottom: 0 !important;
 183   left: 0 !important;
 184   top: 0 !important;
 185 }
 186 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-menu {
 187   width: auto !important;
 188   right: 0;
 189   bottom: 0;
 190   left: 0;
 191 }
 192 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-content {
 193   left: 0 !important;
 194   top: 0 !important;
 195   right: 0 !important;
 196 }
 197 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu {
 198   height: auto !important;
 199   bottom: 0;
 200   left: 0;
 201   top: 0;
 202 }
 203 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
 204   top: 0 !important;
 205   right: 0 !important;
 206   bottom: 0 !important;
 207 }
 208
 209
 210
 211 .oo-ui-stackLayout-continuous > .oo-ui-panelLayout {
 212   display: block;
 213   position: relative;
 214 }
 215
 216 .oo-ui-buttonSelectWidget {
 217   display: inline-block;
 218   border-radius: 2px;
 219   margin-right: 8px;
 220   z-index: 0;
 221   position: relative;
 222   padding-bottom: 1px;
 223 }
 224 .oo-ui-buttonSelectWidget:last-child {
 225   margin-right: 0;
 226 }
 227 .oo-ui-buttonSelectWidget:focus {
 228   outline: 0;
 229 }
 230 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
 231   margin-right: -1px;
 232   margin-bottom: -1px;
 233   border-radius: 0;
 234 }
 235 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button {
 236   border-bottom-left-radius: 2px;
 237   border-top-left-radius: 2px;
 238 }
 239 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button {
 240   margin-right: 0;
 241   border-bottom-right-radius: 2px;
 242   border-top-right-radius: 2px;
 243 }
 244 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
 245   border-left-color: var(--border-color-inverted, #fff);
 246 }
 247 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
 248   border-color: var(--border-color-progressive--focus, #36c);
 249   box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c), inset 0 0 0 2px var(--box-shadow-color-inverted, #fff);
 250   outline: 1px solid transparent;
 251 }
 252 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
 253 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
 254   z-index: 1;
 255 }
 256 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
 257   z-index: 3;
 258 }
 259 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
 260   z-index: -1;
 261 }
 262
 263 .oo-ui-buttonOptionWidget {
 264   display: inline-block;
 265 }
 266 .oo-ui-buttonOptionWidget.oo-ui-buttonElement-active .oo-ui-buttonElement-button {
 267   cursor: default;
 268 }
 269
 270 .oo-ui-toggleButtonWidget {
 271   margin-right: 8px;
 272 }
 273 .oo-ui-toggleButtonWidget:last-child {
 274   margin-right: 0;
 275 }
 276 .oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
 277   background-color: var(--background-color-button-quiet--active, rgba(0, 24, 73, 0.082));
 278   color: var(--color-emphasized, #000);
 279 }
 280 .oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not( .oo-ui-image-invert ) {
 281   opacity: 1;
 282 }
 283
 284 .oo-ui-outlineSelectWidget {
 285   height: 100%;
 286 }
 287 .oo-ui-outlineSelectWidget:focus {
 288   box-shadow: inset 0 0 0 2px var(--box-shadow-color-progressive--focus, #36c);
 289 }
 290
 291 .oo-ui-outlineOptionWidget {
 292   -webkit-touch-callout: none;
 293   -webkit-user-select: none;
 294   -moz-user-select: none;
 295   -ms-user-select: none;
 296   user-select: none;
 297   padding: 11px 12px;
 298   transition-property: background-color, color;
 299   transition-duration: 100ms;
 300 }
 301 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
 302   background-color: var(--background-color-interactive, #eaecf0);
 303   color: var(--color-emphasized, #000);
 304 }
 305 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected,
 306 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
 307   background-color: var(--background-color-progressive-subtle, #eaf3ff);
 308   color: var(--color-progressive, #36c);
 309 }
 310 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
 311   padding-right: 1.5em;
 312 }
 313 .oo-ui-outlineOptionWidget-level-1 {
 314   padding-left: 2.571em;
 315 }
 316 .oo-ui-outlineOptionWidget-level-1.oo-ui-iconElement {
 317   padding-left: 4.429em;
 318 }
 319 .oo-ui-outlineOptionWidget-level-1.oo-ui-iconElement .oo-ui-iconElement-icon {
 320   left: 2.571em;
 321 }
 322 .oo-ui-outlineOptionWidget-level-2 {
 323   padding-left: 5.142em;
 324 }
 325 .oo-ui-outlineOptionWidget-level-2.oo-ui-iconElement {
 326   padding-left: 6.857em;
 327 }
 328 .oo-ui-outlineOptionWidget-level-2.oo-ui-iconElement .oo-ui-iconElement-icon {
 329   left: 4.429em;
 330 }
 331
 332 .oo-ui-outlineControlsWidget {
 333   background-color: var(--background-color-base, #fff);
 334 }
 335 .oo-ui-outlineControlsWidget-items,
 336 .oo-ui-outlineControlsWidget-movers {
 337   float: left;
 338   box-sizing: border-box;
 339 }
 340 .oo-ui-outlineControlsWidget-items {
 341   float: left;
 342 }
 343 .oo-ui-outlineControlsWidget-items .oo-ui-buttonWidget {
 344   float: left;
 345 }
 346 .oo-ui-outlineControlsWidget-movers {
 347   float: right;
 348 }
 349 .oo-ui-outlineControlsWidget-items > .oo-ui-buttonWidget,
 350 .oo-ui-outlineControlsWidget-movers > .oo-ui-buttonWidget {
 351   height: 2.2857143em;
 352   width: 2.2857143em;
 353   margin: 0 !important;
 354   /* stylelint-disable-line declaration-no-important */
 355 }
 356
 357 .oo-ui-tabSelectWidget {
 358   text-align: left;
 359   overflow: auto hidden;
 360   -webkit-overflow-scrolling: auto;
 361 }
 362 .oo-ui-tabSelectWidget-mobile {
 363   white-space: nowrap;
 364 }
 365 .oo-ui-tabSelectWidget-framed {
 366   background-color: var(--background-color-interactive, #eaecf0);
 367 }
 368 .oo-ui-tabSelectWidget-frameless {
 369   box-shadow: inset 0 -1px 0 0 var(--border-color-base, #a2a9b1);
 370 }
 371 .oo-ui-tabSelectWidget-mobile::after {
 372   content: '';
 373   position: absolute;
 374   bottom: 0;
 375   right: 0;
 376   width: 18px;
 377   height: 2.2857143em;
 378   pointer-events: none;
 379 }
 380 .oo-ui-tabSelectWidget-mobile.oo-ui-tabSelectWidget-framed::after {
 381   background-color: #eaecf0;
 382   background-image: linear-gradient(to right, rgba(234, 236, 240, 0) 0, #eaecf0 100%);
 383   background-color: transparent;
 384 }
 385 .oo-ui-tabSelectWidget-mobile.oo-ui-tabSelectWidget-frameless::after {
 386   background-color: #ffffff;
 387   background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
 388   background-color: transparent;
 389   bottom: 0.14285714em;
 390 }
 391 .oo-ui-tabSelectWidget.oo-ui-widget-enabled:focus {
 392   outline: 0;
 393 }
 394
 395 .oo-ui-tabOptionWidget {
 396   display: inline-block;
 397   box-sizing: border-box;
 398   vertical-align: bottom;
 399   color: var(--color-base, #202122);
 400   margin: 6px 0 0 6px;
 401   padding: 0 8px;
 402   border-color: transparent;
 403   border-style: solid;
 404   font-weight: 700;
 405   line-height: 1;
 406   transition-property: background-color, color, border-color;
 407   transition-duration: 100ms;
 408 }
 409 .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
 410   cursor: default;
 411 }
 412 .oo-ui-tabOptionWidget > .oo-ui-labelElement-label {
 413   color: inherit;
 414   padding: 5px 5px;
 415   line-height: 1.42857143em;
 416   text-decoration: inherit;
 417 }
 418 .oo-ui-tabSelectWidget-mobile .oo-ui-tabOptionWidget:last-child {
 419   margin-right: 18px;
 420 }
 421 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
 422   border-width: 1px 1px 0 1px;
 423   border-top-left-radius: 2px;
 424   border-top-right-radius: 2px;
 425 }
 426 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
 427   border-bottom: 2px solid transparent;
 428   padding: 5px 5px 3px;
 429   transition-property: border-color;
 430   transition-duration: 100ms;
 431 }
 432 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
 433   background-color: var(--background-color-base, #fff);
 434   color: var(--color-emphasized, #000);
 435 }
 436 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
 437   border-bottom-color: var(--background-color-base, #fff);
 438 }
 439 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
 440   background-color: rgba(255, 255, 255, 0.3);
 441   color: var(--color-base, #202122);
 442 }
 443 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
 444   background-color: rgba(255, 255, 255, 0.8);
 445   color: var(--color-emphasized, #000);
 446 }
 447 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
 448   background-color: var(--background-color-base, #fff);
 449 }
 450 .oo-ui-tabSelectWidget-framed.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
 451   border-bottom-color: var(--border-color-progressive--focus, #36c);
 452 }
 453 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget {
 454   margin: 6px 6px -1px 0;
 455   border-width: 1px 0;
 456   box-shadow: inset 0 0 0 0 var(--color-progressive, #36c);
 457   transition-property: color, box-shadow;
 458   transition-duration: 100ms;
 459 }
 460 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
 461   color: var(--color-progressive, #36c);
 462   box-shadow: inset 0 -2px 0 0 var(--color-progressive, #36c);
 463 }
 464 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:not( .oo-ui-optionWidget-selected ):hover {
 465   color: var(--color-progressive--hover, #4b77d6);
 466   box-shadow: inset 0 -2px 0 0 var(--color-progressive--hover, #4b77d6);
 467 }
 468 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:not( .oo-ui-optionWidget-selected ):active {
 469   color: var(--color-progressive--active, #233566);
 470   box-shadow: inset 0 -2px 0 0 var(--color-progressive--active, #233566);
 471 }
 472 .oo-ui-tabSelectWidget-frameless.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
 473   border-radius: 2px;
 474   box-shadow: inset 0 0 0 2px var(--color-progressive, #36c);
 475 }
 476
 477
 478 .oo-ui-tagMultiselectWidget {
 479   display: inline-block;
 480   position: relative;
 481   width: 100%;
 482   max-width: 50em;
 483   vertical-align: top;
 484 }
 485 .oo-ui-tagMultiselectWidget-handle {
 486   width: 100%;
 487   display: block;
 488   position: relative;
 489 }
 490 .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon,
 491 .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
 492   position: absolute;
 493   top: 0;
 494   height: 100%;
 495 }
 496 .oo-ui-tagMultiselectWidget-content {
 497   position: relative;
 498 }
 499 .oo-ui-tagMultiselectWidget-group {
 500   display: inline;
 501 }
 502 .oo-ui-tagMultiselectWidget-outlined {
 503   width: 100%;
 504 }
 505 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-group > input {
 506   display: none;
 507 }
 508 .oo-ui-tagMultiselectWidget-focusTrap {
 509   display: inline-block;
 510   height: 1px;
 511   width: 1px;
 512 }
 513 .oo-ui-tagMultiselectWidget-focusTrap:focus {
 514   outline: 0;
 515 }
 516 .oo-ui-tagMultiselectWidget-handle {
 517   box-sizing: border-box;
 518   min-height: 32px;
 519   margin-right: 8px;
 520   border: 1px solid var(--border-color-base, #a2a9b1);
 521   border-radius: 2px;
 522   padding: 0 8px;
 523   line-height: 1;
 524 }
 525 .oo-ui-tagMultiselectWidget-handle:last-child {
 526   margin-right: 0;
 527 }
 528 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group {
 529   display: inline-block;
 530   max-width: 100%;
 531   margin-top: 4px;
 532   margin-left: -0.14285714em;
 533 }
 534 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input {
 535   background-color: transparent;
 536   color: var(--color-emphasized, #000);
 537   box-sizing: border-box;
 538   height: 2.14285716em;
 539   border: 0;
 540   padding: 5px 0 5px 0.57142857em;
 541   margin-top: -4px;
 542   font-family: inherit;
 543   font-size: inherit;
 544   line-height: 1.42857143em;
 545   vertical-align: top;
 546   /* stylelint-disable selector-no-vendor-prefix */
 547   /* stylelint-enable selector-no-vendor-prefix */
 548 }
 549 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::-webkit-input-placeholder {
 550   color: var(--color-placeholder, #72777d);
 551   opacity: 1;
 552 }
 553 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::placeholder {
 554   color: var(--color-placeholder, #72777d);
 555   opacity: 1;
 556 }
 557 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input:focus {
 558   outline: 1px solid transparent;
 559 }
 560 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input:first-child {
 561   margin-left: 0.14285714em;
 562   padding-left: 0;
 563 }
 564 .oo-ui-tagMultiselectWidget.oo-ui-iconElement .oo-ui-tagMultiselectWidget-handle {
 565   padding-left: 2.0285714em;
 566 }
 567 .oo-ui-tagMultiselectWidget.oo-ui-iconElement .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon {
 568   left: 0;
 569   margin: 0 0.3em;
 570 }
 571 .oo-ui-tagMultiselectWidget.oo-ui-indicatorElement .oo-ui-tagMultiselectWidget-handle {
 572   padding-right: 2.4071429em;
 573 }
 574 .oo-ui-tagMultiselectWidget.oo-ui-indicatorElement .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
 575   right: 0;
 576   margin: 0 0.775em;
 577 }
 578 .oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
 579   border-bottom: 0;
 580   border-bottom-left-radius: 0;
 581   border-bottom-right-radius: 0;
 582 }
 583 .oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
 584   border-top-left-radius: 0;
 585   border-top-right-radius: 0;
 586 }
 587 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
 588   background-color: var(--background-color-base, #fff);
 589 }
 590 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
 591   transition-property: border-color, box-shadow;
 592   transition-duration: 250ms;
 593 }
 594 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
 595   border-color: var(--border-color-input--hover, #72777d);
 596 }
 597 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle {
 598   border-color: var(--border-color-progressive--focus, #36c);
 599   outline: 1px solid transparent;
 600   box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
 601 }
 602 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid .oo-ui-tagMultiselectWidget-handle,
 603 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid:hover .oo-ui-tagMultiselectWidget-handle {
 604   border-color: var(--border-color-error, #9f3526);
 605 }
 606 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined {
 607   background-color: var(--background-color-neutral-subtle, #f8f9fa);
 608 }
 609 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
 610   background-color: var(--background-color-base, #fff);
 611 }
 612 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
 613   border-color: var(--border-color-error, #9f3526);
 614 }
 615 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
 616   color: var(--color-error, #d73333);
 617 }
 618 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle {
 619   background-color: var(--background-color-disabled-subtle, #eaecf0);
 620   color: var(--color-disabled, #72777d);
 621   text-shadow: 0 1px 1px var(--color-inverted, #fff);
 622   border-color: var(--border-color-disabled, #c8ccd1);
 623 }
 624 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon,
 625 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
 626   opacity: 0.51;
 627 }
 628
 629
 630 .oo-ui-tagItemWidget {
 631   position: relative;
 632   display: inline-block;
 633   cursor: default;
 634   white-space: nowrap;
 635   box-sizing: border-box;
 636   width: auto;
 637   max-width: 100%;
 638   height: 1.57142857em;
 639   margin: 0 4px 4px 0;
 640   border: 1px solid var(--border-color-base, #a2a9b1);
 641   border-radius: 1.57142857em;
 642   padding: 0 8px;
 643   line-height: 1.42857143em;
 644   vertical-align: middle;
 645 }
 646 .oo-ui-tagItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
 647   display: inline-block;
 648   max-width: 100%;
 649   text-overflow: ellipsis;
 650   overflow: hidden;
 651 }
 652 .oo-ui-tagItemWidget.oo-ui-labelElement:not( .oo-ui-tagItemWidget-fixed ) .oo-ui-labelElement-label {
 653   cursor: text;
 654 }
 655 .oo-ui-tagItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
 656   font-size: 0.92857143em;
 657   line-height: 1.61538462em;
 658 }
 659 .oo-ui-tagItemWidget.oo-ui-widget-enabled {
 660   color: var(--color-base, #202122);
 661   transition-property: background-color, color, border-color, box-shadow;
 662   transition-duration: 100ms;
 663 }
 664 .oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
 665   background-color: var(--background-color-base, #fff);
 666   color: var(--color-base--hover, #404244);
 667   border-color: var(--border-color-base, #a2a9b1);
 668 }
 669 .oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
 670   border-color: var(--border-color-progressive--focus, #36c);
 671   box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
 672   outline: 1px solid transparent;
 673 }
 674 .oo-ui-tagItemWidget.oo-ui-widget-enabled:not( .oo-ui-tagItemWidget-fixed ) {
 675   background-color: var(--background-color-interactive-subtle, #f8f9fa);
 676   padding-right: 23px;
 677 }
 678 .oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
 679   border-color: var(--border-color-error, #9f3526);
 680 }
 681 .oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
 682   border-color: var(--border-color-error, #9f3526);
 683 }
 684 .oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
 685   border-color: var(--border-color-error, #9f3526);
 686   box-shadow: inset 0 0 0 1px var(--box-shadow-color-destructive--focus, #36c);
 687 }
 688 .oo-ui-tagItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement {
 689   display: block;
 690   position: absolute;
 691   top: 0;
 692   right: 0;
 693 }
 694 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button {
 695   display: block;
 696   min-width: 20px;
 697   min-height: 20px;
 698   border: 0;
 699   border-radius: 1.57142857em;
 700   padding-top: 1.42857143em;
 701   padding-left: 1.42857143em;
 702   transition-property: background-color;
 703   transition-duration: 100ms;
 704 }
 705 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
 706   background-color: var(--background-color-base, #fff);
 707 }
 708 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
 709   background-color: var(--background-color-interactive, #eaecf0);
 710 }
 711 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-icon-close {
 712   left: 3px;
 713   min-width: 14px;
 714   width: 1em;
 715 }
 716 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-labelElement-label,
 717 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
 718   display: none;
 719 }
 720 .oo-ui-tagItemWidget.oo-ui-widget-disabled {
 721   background-color: var(--background-color-disabled-subtle, #eaecf0);
 722   color: var(--color-disabled, #72777d);
 723   border-color: var(--border-color-disabled, #c8ccd1);
 724   text-shadow: 0 1px 1px var(--color-inverted, #fff);
 725 }
 726 .oo-ui-tagItemWidget.oo-ui-widget-disabled:focus {
 727   outline: 0;
 728 }
 729 .oo-ui-tagItemWidget.oo-ui-widget-disabled > .oo-ui-buttonElement {
 730   display: none;
 731 }
 732
 733 .oo-ui-searchWidget-query {
 734   position: absolute;
 735   top: 0;
 736   left: 0;
 737   right: 0;
 738 }
 739 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
 740   width: 100%;
 741 }
 742 .oo-ui-searchWidget-results {
 743   position: absolute;
 744   bottom: 0;
 745   left: 0;
 746   right: 0;
 747   overflow: hidden auto;
 748   -webkit-overflow-scrolling: touch;
 749 }
 750 .oo-ui-searchWidget-query {
 751   height: 4em;
 752   padding: 0 16px;
 753   border-bottom: 1px solid var(--border-color-subtle, #c8ccd1);
 754   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
 755 }
 756 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
 757   margin: 12px 0;
 758 }
 759 .oo-ui-searchWidget-results {
 760   top: 4em;
 761   padding: 12px 16px 16px;
 762   line-height: 0;
 763 }