[Summary view] [Print] [Text view]

   1  /**
   2   * Typography
   3   */
   4  /**
   5   * SCSS Variables.
   6   *
   7   * Please use variables from this sheet to ensure consistency across the UI.
   8   * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
   9   * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  10   */
  11  /**
  12   * Colors
  13   */
  14  /**
  15   * Fonts & basic variables.
  16   */
  17  /**
  18   * Typography
  19   */
  20  /**
  21   * Grid System.
  22   * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  23   */
  24  /**
  25   * Radius scale.
  26   */
  27  /**
  28   * Elevation scale.
  29   */
  30  /**
  31   * Dimensions.
  32   */
  33  /**
  34   * Mobile specific styles
  35   */
  36  /**
  37   * Editor styles.
  38   */
  39  /**
  40   * Block & Editor UI.
  41   */
  42  /**
  43   * Block paddings.
  44   */
  45  /**
  46   * React Native specific.
  47   * These variables do not appear to be used anywhere else.
  48   */
  49  /**
  50   * Breakpoints & Media Queries
  51   */
  52  /**
  53  *  Converts a hex value into the rgb equivalent.
  54  *
  55  * @param {string} hex - the hexadecimal value to convert
  56  * @return {string} comma separated rgb values
  57  */
  58  /**
  59   * Long content fade mixin
  60   *
  61   * Creates a fading overlay to signify that the content is longer
  62   * than the space allows.
  63   */
  64  /**
  65   * Breakpoint mixins
  66   */
  67  /**
  68   * Focus styles.
  69   */
  70  /**
  71   * Applies editor left position to the selector passed as argument
  72   */
  73  /**
  74   * Styles that are reused verbatim in a few places
  75   */
  76  /**
  77   * Allows users to opt-out of animations via OS-level preferences.
  78   */
  79  /**
  80   * Reset default styles for JavaScript UI based pages.
  81   * This is a WP-admin agnostic reset
  82   */
  83  /**
  84   * Reset the WP Admin page styles for Gutenberg-like pages.
  85   */
  86  .wp-block-navigation {
  87    position: relative;
  88  }
  89  .wp-block-navigation ul {
  90    margin-top: 0;
  91    margin-bottom: 0;
  92    margin-right: 0;
  93    padding-right: 0;
  94  }
  95  .wp-block-navigation ul,
  96  .wp-block-navigation ul li {
  97    list-style: none;
  98    padding: 0;
  99  }
 100  .wp-block-navigation .wp-block-navigation-item {
 101    background-color: inherit;
 102    display: flex;
 103    align-items: center;
 104    position: relative;
 105  }
 106  .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty {
 107    display: none;
 108  }
 109  .wp-block-navigation .wp-block-navigation-item__content {
 110    display: block;
 111    z-index: 1;
 112  }
 113  .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
 114    color: inherit;
 115  }
 116  .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content {
 117    text-decoration: underline;
 118  }
 119  .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content:active {
 120    text-decoration: underline;
 121  }
 122  .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content {
 123    text-decoration: line-through;
 124  }
 125  .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active {
 126    text-decoration: line-through;
 127  }
 128  .wp-block-navigation :where(a), .wp-block-navigation :where(a:focus), .wp-block-navigation :where(a:active) {
 129    text-decoration: none;
 130  }
 131  .wp-block-navigation .wp-block-navigation__submenu-icon {
 132    align-self: center;
 133    line-height: 0;
 134    display: inline-block;
 135    font-size: inherit;
 136    padding: 0;
 137    background-color: inherit;
 138    color: currentColor;
 139    border: none;
 140    width: 0.6em;
 141    height: 0.6em;
 142    margin-right: 0.25em;
 143  }
 144  .wp-block-navigation .wp-block-navigation__submenu-icon svg {
 145    display: inline-block;
 146    stroke: currentColor;
 147    width: inherit;
 148    height: inherit;
 149    margin-top: 0.075em;
 150  }
 151  .wp-block-navigation {
 152    --navigation-layout-justification-setting: flex-start;
 153    --navigation-layout-direction: row;
 154    --navigation-layout-wrap: wrap;
 155    --navigation-layout-justify: flex-start;
 156    --navigation-layout-align: center;
 157  }
 158  .wp-block-navigation.is-vertical {
 159    --navigation-layout-direction: column;
 160    --navigation-layout-justify: initial;
 161    --navigation-layout-align: flex-start;
 162  }
 163  .wp-block-navigation.no-wrap {
 164    --navigation-layout-wrap: nowrap;
 165  }
 166  .wp-block-navigation.items-justified-center {
 167    --navigation-layout-justification-setting: center;
 168    --navigation-layout-justify: center;
 169  }
 170  .wp-block-navigation.items-justified-center.is-vertical {
 171    --navigation-layout-align: center;
 172  }
 173  .wp-block-navigation.items-justified-right {
 174    --navigation-layout-justification-setting: flex-end;
 175    --navigation-layout-justify: flex-end;
 176  }
 177  .wp-block-navigation.items-justified-right.is-vertical {
 178    --navigation-layout-align: flex-end;
 179  }
 180  .wp-block-navigation.items-justified-space-between {
 181    --navigation-layout-justification-setting: space-between;
 182    --navigation-layout-justify: space-between;
 183  }
 184  
 185  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
 186    background-color: inherit;
 187    color: inherit;
 188    position: absolute;
 189    z-index: 2;
 190    display: flex;
 191    flex-direction: column;
 192    align-items: normal;
 193    opacity: 0;
 194  }
 195  @media not (prefers-reduced-motion) {
 196    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
 197      transition: opacity 0.1s linear;
 198    }
 199  }
 200  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
 201    visibility: hidden;
 202    width: 0;
 203    height: 0;
 204    overflow: hidden;
 205  }
 206  .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
 207    display: flex;
 208    flex-grow: 1;
 209    padding: 0.5em 1em;
 210  }
 211  .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
 212    margin-left: 0;
 213    margin-right: auto;
 214  }
 215  .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
 216    margin: 0;
 217  }
 218  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
 219    right: -1px;
 220    top: 100%;
 221  }
 222  @media (min-width: 782px) {
 223    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
 224      right: 100%;
 225      top: -1px;
 226    }
 227    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
 228      content: "";
 229      position: absolute;
 230      left: 100%;
 231      height: 100%;
 232      display: block;
 233      width: 0.5em;
 234      background: transparent;
 235    }
 236    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
 237      margin-left: 0.25em;
 238    }
 239    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
 240      transform: rotate(90deg);
 241    }
 242  }
 243  .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
 244    visibility: visible;
 245    overflow: visible;
 246    opacity: 1;
 247    width: auto;
 248    height: auto;
 249    min-width: 200px;
 250  }
 251  .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
 252    visibility: visible;
 253    overflow: visible;
 254    opacity: 1;
 255    width: auto;
 256    height: auto;
 257    min-width: 200px;
 258  }
 259  .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
 260    visibility: visible;
 261    overflow: visible;
 262    opacity: 1;
 263    width: auto;
 264    height: auto;
 265    min-width: 200px;
 266  }
 267  
 268  .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
 269    right: 0;
 270    top: 100%;
 271  }
 272  @media (min-width: 782px) {
 273    .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
 274      right: 100%;
 275      top: 0;
 276    }
 277  }
 278  
 279  .wp-block-navigation-submenu {
 280    position: relative;
 281    display: flex;
 282  }
 283  .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
 284    stroke: currentColor;
 285  }
 286  
 287  button.wp-block-navigation-item__content {
 288    background-color: transparent;
 289    border: none;
 290    color: currentColor;
 291    font-size: inherit;
 292    font-family: inherit;
 293    letter-spacing: inherit;
 294    line-height: inherit;
 295    font-style: inherit;
 296    font-weight: inherit;
 297    text-transform: inherit;
 298    text-align: right;
 299  }
 300  
 301  .wp-block-navigation-submenu__toggle {
 302    cursor: pointer;
 303  }
 304  .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon > svg,
 305  .wp-block-navigation-submenu__toggle[aria-expanded=true] > svg {
 306    transform: rotate(-180deg);
 307  }
 308  
 309  .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
 310    padding-right: 0;
 311    padding-left: 0.85em;
 312  }
 313  .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
 314    margin-right: -0.6em;
 315    pointer-events: none;
 316  }
 317  
 318  .wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
 319    padding: 0;
 320  }
 321  
 322  /**
 323   * Margins
 324   */
 325  .wp-block-navigation__responsive-container,
 326  .wp-block-navigation__responsive-close,
 327  .wp-block-navigation__responsive-dialog,
 328  .wp-block-navigation .wp-block-page-list,
 329  .wp-block-navigation__container,
 330  .wp-block-navigation__responsive-container-content {
 331    gap: inherit;
 332  }
 333  
 334  /**
 335   * Paddings
 336   */
 337  :where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),
 338  :where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)) {
 339    padding: 0.5em 1em;
 340  }
 341  
 342  :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),
 343  :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),
 344  :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),
 345  :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content) {
 346    padding: 0.5em 1em;
 347  }
 348  
 349  /**
 350   * Justifications.
 351   */
 352  .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container,
 353  .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container,
 354  .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container,
 355  .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
 356    right: auto;
 357    left: 0;
 358  }
 359  .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
 360  .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
 361  .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
 362  .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
 363    right: -1px;
 364    left: -1px;
 365  }
 366  @media (min-width: 782px) {
 367    .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
 368    .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
 369    .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
 370    .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
 371      right: auto;
 372      left: 100%;
 373    }
 374  }
 375  
 376  .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
 377    background-color: #fff;
 378    border: 1px solid rgba(0, 0, 0, 0.15);
 379  }
 380  
 381  .wp-block-navigation.has-background .wp-block-navigation__submenu-container {
 382    background-color: inherit;
 383  }
 384  
 385  .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
 386    color: #000;
 387  }
 388  
 389  .wp-block-navigation__container {
 390    display: flex;
 391    flex-wrap: var(--navigation-layout-wrap, wrap);
 392    flex-direction: var(--navigation-layout-direction, initial);
 393    justify-content: var(--navigation-layout-justify, initial);
 394    align-items: var(--navigation-layout-align, initial);
 395    list-style: none;
 396    margin: 0;
 397    padding-right: 0;
 398  }
 399  .wp-block-navigation__container .is-responsive {
 400    display: none;
 401  }
 402  
 403  .wp-block-navigation__container:only-child,
 404  .wp-block-page-list:only-child {
 405    flex-grow: 1;
 406  }
 407  
 408  /**
 409   * Mobile menu.
 410   */
 411  @keyframes overlay-menu__fade-in-animation {
 412    from {
 413      opacity: 0;
 414      transform: translateY(0.5em);
 415    }
 416    to {
 417      opacity: 1;
 418      transform: translateY(0);
 419    }
 420  }
 421  .wp-block-navigation__responsive-container {
 422    display: none;
 423    position: fixed;
 424    top: 0;
 425    right: 0;
 426    left: 0;
 427    bottom: 0;
 428  }
 429  .wp-block-navigation__responsive-container :where(.wp-block-navigation-item a) {
 430    color: inherit;
 431  }
 432  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
 433    display: flex;
 434    flex-wrap: var(--navigation-layout-wrap, wrap);
 435    flex-direction: var(--navigation-layout-direction, initial);
 436    justify-content: var(--navigation-layout-justify, initial);
 437    align-items: var(--navigation-layout-align, initial);
 438  }
 439  .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
 440    color: inherit !important;
 441    background-color: inherit !important;
 442  }
 443  .wp-block-navigation__responsive-container.is-menu-open {
 444    display: flex;
 445    flex-direction: column;
 446    background-color: inherit;
 447  }
 448  @media not (prefers-reduced-motion) {
 449    .wp-block-navigation__responsive-container.is-menu-open {
 450      animation: overlay-menu__fade-in-animation 0.1s ease-out;
 451      animation-fill-mode: forwards;
 452    }
 453  }
 454  .wp-block-navigation__responsive-container.is-menu-open {
 455    padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
 456    padding-left: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
 457    padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
 458    padding-right: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
 459    overflow: auto;
 460    z-index: 100000;
 461  }
 462  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
 463    padding-top: calc(2rem + 24px);
 464    overflow: visible;
 465    display: flex;
 466    flex-direction: column;
 467    flex-wrap: nowrap;
 468    align-items: var(--navigation-layout-justification-setting, inherit);
 469  }
 470  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
 471  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list,
 472  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
 473    justify-content: flex-start;
 474  }
 475  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
 476    display: none;
 477  }
 478  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
 479    opacity: 1;
 480    visibility: visible;
 481    height: auto;
 482    width: auto;
 483    overflow: initial;
 484    min-width: 200px;
 485    position: static;
 486    border: none;
 487    padding-right: 2rem;
 488    padding-left: 2rem;
 489  }
 490  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container,
 491  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
 492    gap: inherit;
 493  }
 494  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
 495    padding-top: var(--wp--style--block-gap, 2em);
 496  }
 497  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
 498    padding: 0;
 499  }
 500  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
 501  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
 502  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
 503    display: flex;
 504    flex-direction: column;
 505    align-items: var(--navigation-layout-justification-setting, initial);
 506  }
 507  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container,
 508  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
 509  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
 510  .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
 511    color: inherit !important;
 512    background: transparent !important;
 513  }
 514  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
 515    left: auto;
 516    right: auto;
 517  }
 518  @media (min-width: 600px) {
 519    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
 520      display: block;
 521      width: 100%;
 522      position: relative;
 523      z-index: auto;
 524      background-color: inherit;
 525    }
 526    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
 527      display: none;
 528    }
 529    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
 530      right: 0;
 531    }
 532  }
 533  
 534  .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
 535    background-color: #fff;
 536  }
 537  
 538  .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
 539    color: #000;
 540  }
 541  
 542  .wp-block-navigation__toggle_button_label {
 543    font-size: 1rem;
 544    font-weight: bold;
 545  }
 546  
 547  .wp-block-navigation__responsive-container-open,
 548  .wp-block-navigation__responsive-container-close {
 549    vertical-align: middle;
 550    cursor: pointer;
 551    color: currentColor;
 552    background: transparent;
 553    border: none;
 554    margin: 0;
 555    padding: 0;
 556    text-transform: inherit;
 557  }
 558  .wp-block-navigation__responsive-container-open svg,
 559  .wp-block-navigation__responsive-container-close svg {
 560    fill: currentColor;
 561    pointer-events: none;
 562    display: block;
 563    width: 24px;
 564    height: 24px;
 565  }
 566  
 567  .wp-block-navigation__responsive-container-open {
 568    display: flex;
 569  }
 570  .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
 571    font-family: inherit;
 572    font-weight: inherit;
 573    font-size: inherit;
 574  }
 575  @media (min-width: 600px) {
 576    .wp-block-navigation__responsive-container-open:not(.always-shown) {
 577      display: none;
 578    }
 579  }
 580  
 581  .wp-block-navigation__responsive-container-close {
 582    position: absolute;
 583    top: 0;
 584    left: 0;
 585    z-index: 2;
 586  }
 587  .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
 588    font-family: inherit;
 589    font-weight: inherit;
 590    font-size: inherit;
 591  }
 592  
 593  .wp-block-navigation__responsive-close {
 594    width: 100%;
 595  }
 596  .has-modal-open .wp-block-navigation__responsive-close {
 597    max-width: var(--wp--style--global--wide-size, 100%);
 598    margin-right: auto;
 599    margin-left: auto;
 600  }
 601  .wp-block-navigation__responsive-close:focus {
 602    outline: none;
 603  }
 604  
 605  .is-menu-open .wp-block-navigation__responsive-close,
 606  .is-menu-open .wp-block-navigation__responsive-dialog,
 607  .is-menu-open .wp-block-navigation__responsive-container-content {
 608    box-sizing: border-box;
 609  }
 610  
 611  .wp-block-navigation__responsive-dialog {
 612    position: relative;
 613  }
 614  
 615  .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
 616    margin-top: 46px;
 617  }
 618  @media (min-width: 782px) {
 619    .has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
 620      margin-top: 32px;
 621    }
 622  }
 623  
 624  html.has-modal-open {
 625    overflow: hidden;
 626  }