[Summary view] [Print] [Text view]

   1  /*! This file is auto-generated */
   2  #customize-theme-controls #accordion-section-menu_locations {
   3      position: relative;
   4      margin-top: 30px;
   5  }
   6  
   7  #customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
   8      border-bottom-color: #dcdcde;
   9      margin-top: 15px;
  10  }
  11  
  12  #customize-theme-controls .customize-section-title-nav_menus-heading,
  13  #customize-theme-controls .customize-section-title-menu_locations-heading,
  14  #customize-theme-controls .customize-section-title-menu_locations-description {
  15      padding: 0 12px;
  16  }
  17  
  18  #customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description {
  19      /* Override the default italic style for control descriptions */
  20      font-style: normal;
  21  }
  22  
  23  .menu-in-location,
  24  .menu-in-locations {
  25      display: block;
  26      font-weight: 600;
  27      font-size: 10px;
  28  }
  29  
  30  #customize-controls .theme-location-set,
  31  #customize-controls .control-section .accordion-section-title:focus .menu-in-location,
  32  #customize-controls .control-section .accordion-section-title:hover .menu-in-location {
  33      color: #50575e;
  34  }
  35  
  36  /* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */
  37  .customize-control-nav_menu_location .edit-menu,
  38  .customize-control-nav_menu_location .create-menu {
  39      margin-right: 6px;
  40      vertical-align: middle;
  41      line-height: 2.2;
  42  }
  43  
  44  #customize-controls .customize-control-nav_menu_name {
  45      margin-bottom: 12px;
  46  }
  47  
  48  .customize-control-nav_menu_name p:last-of-type {
  49      margin-bottom: 0;
  50  }
  51  
  52  #customize-new-menu-submit {
  53      float: left;
  54      min-width: 85px;
  55  }
  56  
  57  .wp-customizer .menu-item-bar .menu-item-handle,
  58  .wp-customizer .menu-item-settings,
  59  .wp-customizer .menu-item-settings .description-thin {
  60      box-sizing: border-box;
  61  }
  62  
  63  .wp-customizer .menu-item-bar {
  64      margin: 0;
  65  }
  66  
  67  .wp-customizer .menu-item-bar .menu-item-handle {
  68      width: 100%;
  69      max-width: 100%;
  70      background: #fff;
  71  }
  72  
  73  .wp-customizer .menu-item-handle .item-title {
  74      margin-left: 0;
  75  }
  76  
  77  .wp-customizer .menu-item-handle .item-type {
  78      padding: 1px 5px 0 21px;
  79      float: left;
  80      text-align: left;
  81  }
  82  
  83  .wp-customizer .menu-item-handle:hover {
  84      z-index: 8;
  85  }
  86  
  87  .customize-control-nav_menu_item.has-notifications .menu-item-handle {
  88      border-right: 4px solid #72aee6;
  89  }
  90  
  91  .wp-customizer .menu-item-settings {
  92      max-width: 100%;
  93      overflow: hidden;
  94      z-index: 8;
  95      padding: 10px;
  96      background: #f0f0f1;
  97      border: 1px solid #8c8f94;
  98      border-top: none;
  99  }
 100  
 101  .wp-customizer .menu-item-settings .description-thin {
 102      width: 100%;
 103      height: auto;
 104      margin: 0 0 8px;
 105  }
 106  
 107  .wp-customizer .menu-item-settings input[type="text"] {
 108      width: 100%;
 109  }
 110  
 111  .wp-customizer .menu-item-settings .submitbox {
 112      margin: 0;
 113      padding: 0;
 114  }
 115  
 116  .wp-customizer .menu-item-settings .link-to-original {
 117      padding: 5px 0;
 118      border: none;
 119      font-style: normal;
 120      margin: 0;
 121      width: 100%;
 122  }
 123  
 124  .wp-customizer .menu-item .submitbox .submitdelete {
 125      float: right;
 126      margin: 6px 0 0;
 127      padding: 0;
 128      cursor: pointer;
 129  }
 130  
 131  
 132  /**
 133   * Menu items reordering styles
 134   */
 135  
 136  .menu-item-reorder-nav {
 137      display: none;
 138      background-color: #fff;
 139      position: absolute;
 140      top: 0;
 141      left: 0;
 142  }
 143  
 144  .menus-move-left:before {
 145      content: "\f345";
 146      content: "\f341" / '';
 147  }
 148  
 149  .menus-move-right:before {
 150      content: "\f341";
 151      content: "\f345" / '';
 152  }
 153  
 154  .reordering .menu-item .item-controls,
 155  .reordering .menu-item .item-type {
 156      display: none;
 157  }
 158  
 159  .reordering .menu-item-reorder-nav {
 160      display: block;
 161  }
 162  
 163  .customize-control input.menu-name-field {
 164      width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
 165  }
 166  
 167  .wp-customizer .menu-item .item-edit {
 168      position: absolute;
 169      left: -19px;
 170      top: 2px;
 171      display: block;
 172      width: 30px;
 173      height: 38px;
 174      margin-left: 0 !important;
 175      box-shadow: none;
 176      outline: none;
 177      overflow: hidden;
 178      cursor: pointer;
 179      text-align: center;
 180  }
 181  
 182  .wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before {
 183      content: "\f142";
 184      content: "\f142" / '';
 185  }
 186  
 187  .wp-customizer .menu-item-settings p.description {
 188      font-style: normal;
 189  }
 190  
 191  .wp-customizer .menu-settings dl {
 192      margin: 12px 0 0;
 193      padding: 0;
 194  }
 195  
 196  .wp-customizer .menu-settings .checkbox-input {
 197      margin-top: 8px;
 198  }
 199  
 200  .wp-customizer .menu-settings .menu-theme-locations {
 201      border-top: 1px solid #c3c4c7;
 202  }
 203  
 204  .wp-customizer .menu-settings {
 205      margin-top: 36px;
 206      border-top: none;
 207  }
 208  
 209  .wp-customizer .menu-location-settings {
 210      margin-top: 12px;
 211      border-top: none;
 212  }
 213  
 214  .wp-customizer .control-section-nav_menu .menu-location-settings {
 215      margin-top: 24px;
 216      border-top: 1px solid #dcdcde;
 217  }
 218  
 219  .wp-customizer .control-section-nav_menu .menu-location-settings,
 220  .customize-control-nav_menu_auto_add {
 221      padding-top: 12px;
 222  }
 223  
 224  .menu-location-settings .customize-control-checkbox .theme-location-set {
 225      line-height: 1;
 226  }
 227  
 228  .customize-control-nav_menu_auto_add label {
 229      vertical-align: top;
 230  }
 231  
 232  .menu-location-settings .new-menu-locations-widget-note {
 233      display: block;
 234  }
 235  
 236  .customize-control-menu {
 237      margin-top: 4px;
 238  }
 239  
 240  #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
 241      color: #50575e;
 242  }
 243  
 244  /* Screen Options */
 245  .customize-screen-options-toggle {
 246      background: none;
 247      border: none;
 248      color: #50575e;
 249      cursor: pointer;
 250      margin: 0;
 251      padding: 20px;
 252      position: absolute;
 253      left: 0;
 254      top: 30px;
 255  }
 256  
 257  #customize-controls .customize-info .customize-help-toggle {
 258      padding: 20px;
 259  }
 260  
 261  #customize-controls .customize-info .customize-help-toggle:before {
 262      padding: 4px;
 263  }
 264  
 265  .customize-screen-options-toggle:hover,
 266  .customize-screen-options-toggle:active,
 267  .customize-screen-options-toggle:focus,
 268  .active-menu-screen-options .customize-screen-options-toggle,
 269  #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
 270  #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
 271  #customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
 272      color: var(--wp-admin-theme-color);
 273  }
 274  
 275  .customize-screen-options-toggle:focus,
 276  #customize-controls .customize-info .customize-help-toggle:focus {
 277      /* Only visible in Windows High Contrast mode */
 278      outline: 2px solid transparent;
 279  }
 280  
 281  .customize-screen-options-toggle:before {
 282      -moz-osx-font-smoothing: grayscale;
 283      border: none;
 284      content: "\f111";
 285      content: "\f111" / '';
 286      display: block;
 287      font: 18px/1 dashicons;
 288      padding: 5px;
 289      text-align: center;
 290      text-decoration: none !important;
 291      text-indent: 0;
 292      right: 6px;
 293      position: absolute;
 294      top: 6px;
 295  }
 296  
 297  .customize-screen-options-toggle:focus:before,
 298  #customize-controls .customize-info .customize-help-toggle:focus:before {
 299      border-radius: 100%;
 300  }
 301  
 302  .wp-customizer #screen-options-wrap {
 303      display: none;
 304      background: #fff;
 305      border-top: 1px solid #dcdcde;
 306      padding: 4px 15px 15px;
 307  }
 308  
 309  .wp-customizer .metabox-prefs label {
 310      display: block;
 311      padding-left: 0;
 312      line-height: 30px;
 313  }
 314  
 315  /* rework the arrow indicator implementation for NVDA bug same as #32715 */
 316  .wp-customizer .toggle-indicator {
 317      display: inline-block;
 318      font-size: 20px;
 319      line-height: 1;
 320  }
 321  
 322  .rtl .wp-customizer .toggle-indicator {
 323      text-indent: 1px; /* account for the dashicon alignment */
 324  }
 325  
 326  .wp-customizer .menu-item .item-edit .toggle-indicator:before,
 327  #available-menu-items .accordion-section-title .toggle-indicator:before {
 328      content: "\f140";
 329      content: "\f140" / '';
 330      display: block;
 331      padding: 1px 0 1px 2px;
 332      border-radius: 50%;
 333      color: #787c82;
 334      font: normal 20px/1 dashicons;
 335      -webkit-font-smoothing: antialiased;
 336      -moz-osx-font-smoothing: grayscale;
 337      text-decoration: none !important;
 338  }
 339  
 340  .control-section-nav_menu .field-link-target,
 341  .control-section-nav_menu .field-title-attribute,
 342  .control-section-nav_menu .field-css-classes,
 343  .control-section-nav_menu .field-xfn,
 344  .control-section-nav_menu .field-description {
 345      display: none;
 346  }
 347  
 348  .control-section-nav_menu.field-link-target-active .field-link-target,
 349  .control-section-nav_menu.field-title-attribute-active .field-title-attribute,
 350  .control-section-nav_menu.field-css-classes-active .field-css-classes,
 351  .control-section-nav_menu.field-xfn-active .field-xfn,
 352  .control-section-nav_menu.field-description-active .field-description {
 353      display: block;
 354  }
 355  
 356  /* WARNING: The 20px factor is hard-coded in JS. */
 357  .menu-item-depth-0  { margin-right: 0;     }
 358  .menu-item-depth-1  { margin-right: 20px;  }
 359  .menu-item-depth-2  { margin-right: 40px;  }
 360  .menu-item-depth-3  { margin-right: 60px;  }
 361  .menu-item-depth-4  { margin-right: 80px;  }
 362  .menu-item-depth-5  { margin-right: 100px; }
 363  .menu-item-depth-6  { margin-right: 120px; }
 364  .menu-item-depth-7  { margin-right: 140px; }
 365  .menu-item-depth-8  { margin-right: 160px; } /* Not likely to be used or useful beyond this depth */
 366  .menu-item-depth-9  { margin-right: 180px; }
 367  .menu-item-depth-10 { margin-right: 200px; }
 368  .menu-item-depth-11 { margin-right: 220px; }
 369  
 370  /* @todo handle .menu-item-settings width */
 371  .menu-item-depth-0  > .menu-item-bar { margin-left: 0;     }
 372  .menu-item-depth-1  > .menu-item-bar { margin-left: 20px;  }
 373  .menu-item-depth-2  > .menu-item-bar { margin-left: 40px;  }
 374  .menu-item-depth-3  > .menu-item-bar { margin-left: 60px;  }
 375  .menu-item-depth-4  > .menu-item-bar { margin-left: 80px;  }
 376  .menu-item-depth-5  > .menu-item-bar { margin-left: 100px; }
 377  .menu-item-depth-6  > .menu-item-bar { margin-left: 120px; }
 378  .menu-item-depth-7  > .menu-item-bar { margin-left: 140px; }
 379  .menu-item-depth-8  > .menu-item-bar { margin-left: 160px; }
 380  .menu-item-depth-9  > .menu-item-bar { margin-left: 180px; }
 381  .menu-item-depth-10 > .menu-item-bar { margin-left: 200px; }
 382  .menu-item-depth-11 > .menu-item-bar { margin-left: 220px; }
 383  
 384  /* Submenu left margin. */
 385  .menu-item-depth-0  .menu-item-transport { margin-right: 0;      }
 386  .menu-item-depth-1  .menu-item-transport { margin-right: -20px;  }
 387  .menu-item-depth-3  .menu-item-transport { margin-right: -60px;  }
 388  .menu-item-depth-4  .menu-item-transport { margin-right: -80px;  }
 389  .menu-item-depth-2  .menu-item-transport { margin-right: -40px;  }
 390  .menu-item-depth-5  .menu-item-transport { margin-right: -100px; }
 391  .menu-item-depth-6  .menu-item-transport { margin-right: -120px; }
 392  .menu-item-depth-7  .menu-item-transport { margin-right: -140px; }
 393  .menu-item-depth-8  .menu-item-transport { margin-right: -160px; }
 394  .menu-item-depth-9  .menu-item-transport { margin-right: -180px; }
 395  .menu-item-depth-10 .menu-item-transport { margin-right: -200px; }
 396  .menu-item-depth-11 .menu-item-transport { margin-right: -220px; }
 397  
 398  /* WARNING: The 20px factor is hard-coded in JS. */
 399  .reordering .menu-item-depth-0  { margin-right: 0;     }
 400  .reordering .menu-item-depth-1  { margin-right: 15px;  }
 401  .reordering .menu-item-depth-2  { margin-right: 30px;  }
 402  .reordering .menu-item-depth-3  { margin-right: 45px;  }
 403  .reordering .menu-item-depth-4  { margin-right: 60px;  }
 404  .reordering .menu-item-depth-5  { margin-right: 75px;  }
 405  .reordering .menu-item-depth-6  { margin-right: 90px;  }
 406  .reordering .menu-item-depth-7  { margin-right: 105px; }
 407  .reordering .menu-item-depth-8  { margin-right: 120px; } /* Not likely to be used or useful beyond this depth */
 408  .reordering .menu-item-depth-9  { margin-right: 135px; }
 409  .reordering .menu-item-depth-10 { margin-right: 150px; }
 410  .reordering .menu-item-depth-11 { margin-right: 165px; }
 411  
 412  .reordering .menu-item-depth-0  > .menu-item-bar { margin-left: 0;     }
 413  .reordering .menu-item-depth-1  > .menu-item-bar { margin-left: 15px;  }
 414  .reordering .menu-item-depth-2  > .menu-item-bar { margin-left: 30px;  }
 415  .reordering .menu-item-depth-3  > .menu-item-bar { margin-left: 45px;  }
 416  .reordering .menu-item-depth-4  > .menu-item-bar { margin-left: 60px;  }
 417  .reordering .menu-item-depth-5  > .menu-item-bar { margin-left: 75px;  }
 418  .reordering .menu-item-depth-6  > .menu-item-bar { margin-left: 90px;  }
 419  .reordering .menu-item-depth-7  > .menu-item-bar { margin-left: 105px; }
 420  .reordering .menu-item-depth-8  > .menu-item-bar { margin-left: 120px; }
 421  .reordering .menu-item-depth-9  > .menu-item-bar { margin-left: 135px; }
 422  .reordering .menu-item-depth-10 > .menu-item-bar { margin-left: 150px; }
 423  .reordering .menu-item-depth-11 > .menu-item-bar { margin-left: 165px; }
 424  
 425  .control-section-nav_menu.menu .menu-item-edit-active {
 426      margin-right: 0;
 427  }
 428  
 429  .control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
 430      margin-left: 0;
 431  }
 432  
 433  .control-section-nav_menu.menu .sortable-placeholder {
 434      margin-top: 0;
 435      margin-bottom: 1px;
 436      max-width: calc(100% - 2px);
 437      float: right;
 438      display: list-item;
 439      border-color: #a7aaad;
 440  }
 441  
 442  .menu-item-transport li.customize-control {
 443      float: none;
 444  }
 445  
 446  .control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
 447      margin-top: 0;
 448  }
 449  
 450  /**
 451   * Add-menu-items mode
 452   */
 453  
 454  .adding-menu-items .control-section {
 455      opacity: .4;
 456  }
 457  
 458  .adding-menu-items .control-panel.control-section,
 459  .adding-menu-items .control-section.open {
 460      opacity: 1;
 461  }
 462  
 463  .menu-item-bar .item-delete {
 464      color: #d63638;
 465      position: absolute;
 466      top: 2px;
 467      left: -19px;
 468      width: 30px;
 469      height: 38px;
 470      cursor: pointer;
 471      display: none;
 472  }
 473  
 474  .menu-item-bar .item-delete:before {
 475      content: "\f335";
 476      content: "\f335" / '';
 477      position: absolute;
 478      top: 9px;
 479      right: 5px;
 480      border-radius: 50%;
 481      font: normal 20px/1 dashicons;
 482      -webkit-font-smoothing: antialiased;
 483      -moz-osx-font-smoothing: grayscale;
 484  }
 485  
 486  .menu-item-bar .item-delete:hover,
 487  .menu-item-bar .item-delete:focus {
 488      box-shadow: none;
 489      outline: none;
 490      color: #d63638;
 491  }
 492  
 493  .adding-menu-items .menu-item-bar .item-edit {
 494      display: none;
 495  }
 496  
 497  .adding-menu-items .menu-item-bar .item-delete {
 498      display: block;
 499  }
 500  
 501  /**
 502   * Styles for menu-item addition panel
 503   */
 504  
 505  #available-menu-items.opening {
 506      overflow-y: hidden; /* avoid scrollbar jitter with animating heights */
 507  }
 508  
 509  #available-menu-items #available-menu-items-search.open {
 510      height: 100%;
 511      border-bottom: none;
 512  }
 513  
 514  #available-menu-items .accordion-section-title {
 515      border-right: none;
 516      border-left: none;
 517      background: #fff;
 518      transition: background-color 0.15s;
 519      /* Reset the value inherited from the base .accordion-section-title style. Ticket #37589. */
 520      -webkit-user-select: auto;
 521      user-select: auto;
 522  }
 523  
 524  #available-menu-items .open .accordion-section-title,
 525  #available-menu-items #available-menu-items-search .accordion-section-title {
 526      background: #f0f0f1;
 527  }
 528  
 529  /* rework the arrow indicator implementation for NVDA bug see #32715 */
 530  #available-menu-items .accordion-section-title:after {
 531      content: none !important;
 532  }
 533  
 534  #available-menu-items .accordion-section-title:hover .toggle-indicator:before,
 535  #available-menu-items .button-link:hover .toggle-indicator:before,
 536  #available-menu-items .button-link:focus .toggle-indicator:before {
 537      color: #1d2327;
 538  }
 539  
 540  #available-menu-items .open .accordion-section-title .toggle-indicator:before {
 541      content: "\f142";
 542      color: #1d2327;
 543  }
 544  
 545  #available-menu-items .available-menu-items-list {
 546      overflow-y: auto;
 547      max-height: 200px; /* This gets set in JS to fit the screen size, and based on # of sections. */
 548      background: transparent;
 549  }
 550  
 551  #available-menu-items .accordion-section-title button .toggle-indicator {
 552      display: flex;
 553      align-items: center;
 554      width: 28px;
 555      height: 35px;
 556      position: absolute;
 557      top: 5px;
 558      left: 5px;
 559      box-shadow: none;
 560      outline: none;
 561      cursor: pointer;
 562      text-align: center;
 563  }
 564  
 565  #available-menu-items .accordion-section-title .no-items,
 566  #available-menu-items .cannot-expand .accordion-section-title .spinner,
 567  #available-menu-items .cannot-expand .accordion-section-title > button:not(#available-menu-items-search button.is-visible) {
 568      display: none;
 569  }
 570  
 571  #available-menu-items-search.cannot-expand .accordion-section-title .spinner {
 572      display: block;
 573  }
 574  
 575  #available-menu-items .cannot-expand .accordion-section-title .no-items {
 576      float: left;
 577      color: #50575e;
 578      font-weight: 400;
 579      margin-right: 5px;
 580  }
 581  
 582  #available-menu-items .accordion-section-content {
 583      max-height: 290px;
 584      margin: 0;
 585      padding: 0;
 586      position: relative;
 587      background: transparent;
 588  }
 589  
 590  #available-menu-items .accordion-section-content .available-menu-items-list {
 591      margin: 0 0 64px;
 592      padding: 1px 15px 15px;
 593  }
 594  
 595  #available-menu-items .accordion-section-content .available-menu-items-list:only-child { /* Types that do not support new items for the current user */
 596      margin-bottom: 0;
 597  }
 598  
 599  #new-custom-menu-item .accordion-section-content {
 600      padding: 0 15px 15px;
 601  }
 602  
 603  #available-menu-items .menu-item-tpl {
 604      margin: 0;
 605  }
 606  
 607  #custom-menu-item-name.invalid,
 608  #custom-menu-item-url.invalid,
 609  .edit-menu-item-url.invalid,
 610  .menu-name-field.invalid,
 611  .menu-name-field.invalid:focus,
 612  #available-menu-items .new-content-item .create-item-input.invalid,
 613  #available-menu-items .new-content-item .create-item-input.invalid:focus {
 614      border: 1px solid #d63638;
 615  }
 616  
 617  #available-menu-items .menu-item-handle .item-type {
 618      padding-left: 0;
 619  }
 620  
 621  #available-menu-items .menu-item-handle .item-title {
 622      padding-right: 20px;
 623  }
 624  
 625  #available-menu-items .menu-item-handle {
 626      cursor: pointer;
 627  }
 628  
 629  #available-menu-items .menu-item-handle {
 630      box-shadow: none;
 631      margin-top: -1px;
 632  }
 633  
 634  #available-menu-items .menu-item-handle:hover {
 635      z-index: 1;
 636  }
 637  
 638  #available-menu-items .item-title h4 {
 639      padding: 0 0 5px;
 640      font-size: 14px;
 641  }
 642  
 643  #available-menu-items .item-add {
 644      position: absolute;
 645      top: 1px;
 646      right: 1px;
 647      color: #8c8f94;
 648      width: 30px;
 649      height: 38px;
 650      box-shadow: none;
 651      outline: none;
 652      cursor: pointer;
 653      text-align: center;
 654  }
 655  
 656  #available-menu-items .menu-item-handle .item-add:focus {
 657      color: #1d2327;
 658  }
 659  
 660  #available-menu-items .item-add:before {
 661      content: "\f543";
 662      content: "\f543" / '';
 663      position: relative;
 664      right: 2px;
 665      top: 3px;
 666      display: inline-block;
 667      height: 20px;
 668      border-radius: 50%;
 669      font: normal 20px/1.05 dashicons; /* line height is to account for the dashicon's vertical alignment */
 670  }
 671  
 672  #available-menu-items .menu-item-handle.item-added .item-type,
 673  #available-menu-items .menu-item-handle.item-added .item-title,
 674  #available-menu-items .menu-item-handle.item-added:hover .item-add,
 675  #available-menu-items .menu-item-handle.item-added .item-add:focus {
 676      color: #646970;
 677  }
 678  
 679  #available-menu-items .menu-item-handle.item-added .item-add:before {
 680      content: "\f147";
 681      content: "\f147" / '';
 682  }
 683  
 684  #available-menu-items .accordion-section-title.loading .spinner,
 685  #available-menu-items-search.loading .accordion-section-title .spinner {
 686      visibility: visible;
 687      margin: 0 20px;
 688  }
 689  
 690  #available-menu-items-search .spinner {
 691      position: absolute;
 692      bottom: 24px; /* 13 container padding +1 input margin +10 ( ( 40 input height - 20 spinner height ) / 2 ) */
 693      left: 21px;
 694      margin: 0 !important;
 695  }
 696  
 697  /* search results list */
 698  #available-menu-items #available-menu-items-search .accordion-section-content {
 699      position: absolute;
 700      right: 0;
 701      top: 83px; /* below title div / search input (75 + 8 for 40px input) */
 702      bottom: 0; /* 100% height that still triggers lazy load */
 703      max-height: none;
 704      width: 100%;
 705      padding: 1px 15px 15px;
 706      box-sizing: border-box;
 707  }
 708  
 709  #available-menu-items-search .nothing-found {
 710      /* Compensate the 1px top padding of the container. */
 711      margin-top: -1px;
 712  }
 713  
 714  #available-menu-items-search .accordion-section-title:after {
 715      display: none;
 716  }
 717  
 718  #available-menu-items-search .accordion-section-content:empty {
 719      min-height: 0;
 720      padding: 0;
 721  }
 722  
 723  #available-menu-items-search.loading .accordion-section-content div {
 724      opacity: .5;
 725  }
 726  
 727  #available-menu-items-search.loading.loading-more .accordion-section-content div {
 728      opacity: 1;
 729  }
 730  
 731  @media (prefers-reduced-motion: no-preference) {
 732      #customize-preview {
 733          transition: all 0.2s;
 734      }
 735  }
 736  
 737  body.adding-menu-items #available-menu-items {
 738      right: 0;
 739      visibility: visible;
 740  }
 741  
 742  body.adding-menu-items .wp-full-overlay-main {
 743      right: 300px;
 744  }
 745  
 746  body.adding-menu-items #customize-preview {
 747      opacity: 0.4;
 748  }
 749  
 750  body.adding-menu-items #customize-preview iframe {
 751      pointer-events: none;
 752  }
 753  
 754  .menu-item-handle .spinner {
 755      display: none;
 756      float: right;
 757      margin: 0 0 0 8px;
 758  }
 759  
 760  .nav-menu-inserted-item-loading .spinner {
 761      display: block;
 762  }
 763  
 764  .nav-menu-inserted-item-loading .menu-item-handle .item-type {
 765      padding: 0 8px 0 0;
 766  }
 767  
 768  .nav-menu-inserted-item-loading .menu-item-handle,
 769  .added-menu-item .menu-item-handle.loading {
 770      padding: 10px 8px 10px 15px;
 771      cursor: default;
 772      opacity: .5;
 773      background: #fff;
 774      color: #787c82;
 775  }
 776  
 777  .added-menu-item .menu-item-handle {
 778      transition-property: opacity, background, color;
 779      transition-duration: 1.25s;
 780      transition-timing-function: cubic-bezier( .25, -2.5, .75, 8 ); /* Replacement for .hide().fadeIn('slow') in JS to add emphasis when it's loaded. */
 781  }
 782  
 783  /* Add/delete Menus */
 784  
 785  #customize-theme-controls .control-panel-content .control-section-nav_menu:nth-last-child(2) .accordion-section-title {
 786      border-bottom-color: #dcdcde;
 787  }
 788  
 789  /* @todo update selector */
 790  #accordion-section-add_menu {
 791      margin: 15px 12px;
 792  }
 793  
 794  #accordion-section-add_menu h3 {
 795      text-align: left;
 796  }
 797  
 798  #accordion-section-add_menu h3,
 799  #accordion-section-add_menu .customize-add-menu-button {
 800      margin: 0;
 801  }
 802  
 803  #accordion-section-add_menu .customize-add-menu-button {
 804      font-weight: 400;
 805  }
 806  
 807  #create-new-menu-submit {
 808      float: left;
 809      margin: 0 0 12px;
 810  }
 811  
 812  .menu-delete-item {
 813      float: right;
 814      padding: 1em 0;
 815      width: 100%;
 816  }
 817  
 818  .assigned-menu-locations-title p {
 819      margin: 0 0 8px;
 820  }
 821  
 822  li.assigned-to-menu-location .menu-delete-item {
 823      display: none;
 824  }
 825  
 826  li.assigned-to-menu-location .add-new-menu-item {
 827      margin-bottom: 1em;
 828  }
 829  
 830  .menu-item-handle {
 831      margin-top: -1px;
 832  }
 833  .ui-sortable-disabled .menu-item-handle {
 834      cursor: default;
 835  }
 836  
 837  .menu-item-handle:hover {
 838      position: relative;
 839      z-index: 10;
 840      color: var(--wp-admin-theme-color);
 841  }
 842  
 843  .menu-item-handle:hover .item-type,
 844  .menu-item-handle:hover .item-edit,
 845  #available-menu-items .menu-item-handle:hover .item-add {
 846      color: var(--wp-admin-theme-color);
 847  }
 848  
 849  .menu-item-edit-active .menu-item-handle {
 850      border-color: #8c8f94;
 851      border-bottom: none;
 852  }
 853  
 854  .customize-control-nav_menu_item {
 855      margin-bottom: 0;
 856  }
 857  
 858  .customize-control-nav_menu .new-menu-item-invitation {
 859      margin-top: 0;
 860      margin-bottom: 0;
 861  }
 862  
 863  .customize-control-nav_menu .customize-control-nav_menu-buttons {
 864      display: flex;
 865      flex-direction: row-reverse;
 866      align-items: center;
 867      gap: 8px;
 868      margin-top: 12px;
 869  }
 870  
 871  /**
 872   * box-shadows
 873   */
 874  
 875  .wp-customizer .menu-item .submitbox .submitdelete:focus,
 876  .customize-screen-options-toggle:focus:before,
 877  #customize-controls .customize-info .customize-help-toggle:focus:before,
 878  .wp-customizer button:focus .toggle-indicator:before,
 879  .menu-delete:focus,
 880  .menu-item-bar .item-delete:focus:before,
 881  #available-menu-items .item-add:focus:before {
 882      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9);
 883      /* Only visible in Windows High Contrast mode */
 884      outline: 2px solid transparent;
 885  }
 886  
 887  
 888  @media screen and (max-width: 782px) {
 889      #available-menu-items #available-menu-items-search .accordion-section-content {
 890          top: 71px; /* 63 + 8 for 40px input */
 891      }
 892  }
 893  
 894  @media screen and (max-width: 640px) {
 895      #available-menu-items #available-menu-items-search .accordion-section-content {
 896          top: 154px; /* 146 + 8 for 40px input */
 897      }
 898  }