[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   * Standard focus rings for the WordPress Design System.
  72   *
  73   * Apply `outset-ring__focus` inside the relevant pseudo-class at the call site,
  74   * e.g. `&:focus { @include outset-ring__focus(); }`.
  75   */
  76  /**
  77   * Applies editor left position to the selector passed as argument
  78   */
  79  /**
  80   * Styles that are reused verbatim in a few places
  81   */
  82  /**
  83   * Allows users to opt-out of animations via OS-level preferences.
  84   */
  85  /**
  86   * Reset default styles for JavaScript UI based pages.
  87   * This is a WP-admin agnostic reset
  88   */
  89  /**
  90   * Reset the WP Admin page styles for Gutenberg-like pages.
  91   */
  92  /**
  93   * Creates a checkerboard pattern background to indicate transparency.
  94   * @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
  95   */
  96  .wp-block-navigation {
  97    position: relative;
  98  }
  99  .wp-block-navigation ul {
 100    margin-top: 0;
 101    margin-bottom: 0;
 102    margin-right: 0;
 103    padding-right: 0;
 104  }
 105  .wp-block-navigation ul,
 106  .wp-block-navigation ul li {
 107    list-style: none;
 108  }
 109  .wp-block-navigation .wp-block-navigation-item {
 110    background-color: inherit;
 111    display: flex;
 112    align-items: center;
 113    position: relative;
 114  }
 115  .wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container:empty {
 116    display: none;
 117  }
 118  .wp-block-navigation .wp-block-navigation-item__content {
 119    display: block;
 120    z-index: 1;
 121  }
 122  .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
 123    color: inherit;
 124  }
 125  .wp-block-navigation.has-text-decoration-underline .wp-block-navigation-item__content {
 126    text-decoration: underline;
 127  }
 128  .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 {
 129    text-decoration: underline;
 130  }
 131  .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content {
 132    text-decoration: line-through;
 133  }
 134  .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 {
 135    text-decoration: line-through;
 136  }
 137  .wp-block-navigation :where(a), .wp-block-navigation :where(a:focus), .wp-block-navigation :where(a:active) {
 138    text-decoration: none;
 139  }
 140  .wp-block-navigation .wp-block-navigation__submenu-icon {
 141    align-self: center;
 142    line-height: 0;
 143    display: inline-block;
 144    font-size: inherit;
 145    padding: 0;
 146    background-color: inherit;
 147    color: currentColor;
 148    border: none;
 149    width: 0.6em;
 150    height: 0.6em;
 151    margin-right: 0.25em;
 152  }
 153  .wp-block-navigation .wp-block-navigation__submenu-icon svg {
 154    display: inline-block;
 155    stroke: currentColor;
 156    width: inherit;
 157    height: inherit;
 158    margin-top: 0.075em;
 159  }
 160  .wp-block-navigation {
 161    --navigation-layout-justification-setting: flex-start;
 162    --navigation-layout-direction: row;
 163    --navigation-layout-wrap: wrap;
 164    --navigation-layout-justify: flex-start;
 165    --navigation-layout-align: center;
 166  }
 167  .wp-block-navigation.is-vertical {
 168    --navigation-layout-direction: column;
 169    --navigation-layout-justify: initial;
 170    --navigation-layout-align: flex-start;
 171  }
 172  .wp-block-navigation.no-wrap {
 173    --navigation-layout-wrap: nowrap;
 174  }
 175  .wp-block-navigation.items-justified-center {
 176    --navigation-layout-justification-setting: center;
 177    --navigation-layout-justify: center;
 178  }
 179  .wp-block-navigation.items-justified-center.is-vertical {
 180    --navigation-layout-align: center;
 181  }
 182  .wp-block-navigation.items-justified-right {
 183    --navigation-layout-justification-setting: flex-end;
 184    --navigation-layout-justify: flex-end;
 185  }
 186  .wp-block-navigation.items-justified-right.is-vertical {
 187    --navigation-layout-align: flex-end;
 188  }
 189  .wp-block-navigation.items-justified-space-between {
 190    --navigation-layout-justification-setting: space-between;
 191    --navigation-layout-justify: space-between;
 192  }
 193  
 194  :where(.wp-block-navigation) ul li {
 195    padding: 0;
 196  }
 197  
 198  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
 199    background-color: inherit;
 200    color: inherit;
 201    position: absolute;
 202    z-index: 2;
 203    display: flex;
 204    flex-direction: column;
 205    align-items: normal;
 206    opacity: 0;
 207  }
 208  @media not (prefers-reduced-motion) {
 209    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
 210      transition: opacity 0.1s linear;
 211    }
 212  }
 213  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
 214    visibility: hidden;
 215    width: 0;
 216    height: 0;
 217    overflow: hidden;
 218  }
 219  .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
 220    display: flex;
 221    flex-grow: 1;
 222    padding: 0.5em 1em;
 223  }
 224  .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
 225    margin-left: 0;
 226    margin-right: auto;
 227  }
 228  .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
 229    margin: 0;
 230  }
 231  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
 232    right: -1px;
 233    top: 100%;
 234  }
 235  @media (min-width: 782px) {
 236    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
 237      right: 100%;
 238      top: -1px;
 239    }
 240    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container::before {
 241      content: "";
 242      position: absolute;
 243      left: 100%;
 244      height: 100%;
 245      display: block;
 246      width: 0.5em;
 247      background: transparent;
 248    }
 249    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
 250      margin-left: 0.25em;
 251    }
 252    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
 253      transform: rotate(90deg);
 254    }
 255  }
 256  @media (hover: hover) {
 257    .wp-block-navigation .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
 258      visibility: visible;
 259      overflow: visible;
 260      opacity: 1;
 261      width: auto;
 262      height: auto;
 263      min-width: 200px;
 264    }
 265  }
 266  .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container,
 267  .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true] ~ .wp-block-navigation__submenu-container {
 268    visibility: visible;
 269    overflow: visible;
 270    opacity: 1;
 271    width: auto;
 272    height: auto;
 273    min-width: 200px;
 274  }
 275  .wp-block-navigation .has-child.open-always {
 276    flex-wrap: var(--navigation-layout-wrap, wrap);
 277    flex-direction: var(--navigation-layout-direction, initial);
 278    justify-content: var(--navigation-layout-justify, initial);
 279    align-items: var(--navigation-layout-align, initial);
 280    gap: var(--wp--style--block-gap, 2em);
 281  }
 282  .wp-block-navigation .has-child.open-always .wp-block-navigation-item {
 283    justify-content: var(--navigation-layout-justify, initial);
 284  }
 285  .wp-block-navigation .has-child.open-always.wp-block-navigation-submenu,
 286  .wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container {
 287    gap: var(--wp--style--block-gap, 2em);
 288  }
 289  .wp-block-navigation .has-child.open-always.wp-block-navigation-submenu,
 290  .wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container,
 291  .wp-block-navigation .has-child.open-always .wp-block-navigation-item {
 292    padding-top: 0;
 293    padding-bottom: 0;
 294  }
 295  .wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container {
 296    padding-right: var(--wp--style--block-gap, 2em);
 297    padding-left: var(--wp--style--block-gap, 2em);
 298  }
 299  .wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
 300    padding: 0;
 301  }
 302  .wp-block-navigation .has-child.open-always > .wp-block-navigation-item__content,
 303  .wp-block-navigation .has-child.open-always .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
 304    flex-grow: 0;
 305  }
 306  .wp-block-navigation .has-child.open-always > .wp-block-navigation__submenu-container {
 307    visibility: visible;
 308    overflow: visible;
 309    opacity: 1;
 310    width: auto;
 311    height: auto;
 312    flex-basis: 100%;
 313    position: static;
 314    border: none;
 315    background-color: transparent;
 316    color: inherit;
 317  }
 318  
 319  .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
 320    right: 0;
 321    top: 100%;
 322  }
 323  @media (min-width: 782px) {
 324    .wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
 325      right: 100%;
 326      top: 0;
 327    }
 328  }
 329  
 330  .wp-block-navigation-submenu {
 331    position: relative;
 332    display: flex;
 333  }
 334  .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
 335    stroke: currentColor;
 336  }
 337  
 338  button.wp-block-navigation-item__content {
 339    background-color: transparent;
 340    border: none;
 341    color: currentColor;
 342    font-size: inherit;
 343    font-family: inherit;
 344    letter-spacing: inherit;
 345    line-height: inherit;
 346    font-style: inherit;
 347    font-weight: inherit;
 348    text-transform: inherit;
 349    text-align: right;
 350  }
 351  
 352  .wp-block-navigation-submenu__toggle {
 353    cursor: pointer;
 354  }
 355  .wp-block-navigation-submenu__toggle[aria-expanded=true] + .wp-block-navigation__submenu-icon > svg,
 356  .wp-block-navigation-submenu__toggle[aria-expanded=true] > svg {
 357    transform: rotate(-180deg);
 358  }
 359  
 360  .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
 361    padding-right: 0;
 362    padding-left: 0.85em;
 363  }
 364  .wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
 365    margin-right: -0.6em;
 366    pointer-events: none;
 367  }
 368  
 369  .wp-block-navigation-item.open-on-click button.wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle) {
 370    padding: 0;
 371  }
 372  
 373  /**
 374   * Margins
 375   */
 376  .wp-block-navigation__responsive-container,
 377  .wp-block-navigation__responsive-close,
 378  .wp-block-navigation__responsive-dialog,
 379  .wp-block-navigation .wp-block-page-list,
 380  .wp-block-navigation__container,
 381  .wp-block-navigation__responsive-container-content {
 382    gap: inherit;
 383  }
 384  
 385  /**
 386   * Paddings
 387   */
 388  :where(.wp-block-navigation.has-background .wp-block-navigation-item a:not(.wp-element-button)),
 389  :where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)) {
 390    padding: 0.5em 1em;
 391  }
 392  
 393  :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),
 394  :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),
 395  :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),
 396  :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content) {
 397    padding: 0.5em 1em;
 398  }
 399  
 400  /**
 401   * Justifications.
 402   */
 403  .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child .wp-block-navigation__submenu-container,
 404  .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child .wp-block-navigation__submenu-container,
 405  .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container,
 406  .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
 407    right: auto;
 408    left: 0;
 409  }
 410  .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,
 411  .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,
 412  .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
 413  .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
 414    right: -1px;
 415    left: -1px;
 416  }
 417  @media (min-width: 782px) {
 418    .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,
 419    .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,
 420    .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container,
 421    .wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
 422      right: auto;
 423      left: 100%;
 424    }
 425  }
 426  
 427  .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
 428    background-color: #fff;
 429    border: 1px solid rgba(0, 0, 0, 0.15);
 430  }
 431  
 432  .wp-block-navigation.has-background .wp-block-navigation__submenu-container {
 433    background-color: inherit;
 434  }
 435  
 436  .wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
 437    color: #000;
 438  }
 439  
 440  .wp-block-navigation__container {
 441    display: flex;
 442    flex-wrap: var(--navigation-layout-wrap, wrap);
 443    flex-direction: var(--navigation-layout-direction, initial);
 444    justify-content: var(--navigation-layout-justify, initial);
 445    align-items: var(--navigation-layout-align, initial);
 446    list-style: none;
 447    margin: 0;
 448    padding-right: 0;
 449  }
 450  .wp-block-navigation__container .is-responsive {
 451    display: none;
 452  }
 453  
 454  .wp-block-navigation__container:only-child,
 455  .wp-block-page-list:only-child {
 456    flex-grow: 1;
 457  }
 458  
 459  /**
 460   * Mobile menu.
 461   */
 462  @keyframes overlay-menu__fade-in-animation {
 463    from {
 464      opacity: 0;
 465      transform: translateY(0.5em);
 466    }
 467    to {
 468      opacity: 1;
 469      transform: translateY(0);
 470    }
 471  }
 472  .wp-block-navigation__responsive-container {
 473    display: none;
 474    position: fixed;
 475    top: 0;
 476    right: 0;
 477    left: 0;
 478    bottom: 0;
 479  }
 480  .wp-block-navigation__responsive-container :where(.wp-block-navigation-item a) {
 481    color: inherit;
 482  }
 483  .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
 484    display: flex;
 485    flex-wrap: var(--navigation-layout-wrap, wrap);
 486    flex-direction: var(--navigation-layout-direction, initial);
 487    justify-content: var(--navigation-layout-justify, initial);
 488    align-items: var(--navigation-layout-align, initial);
 489  }
 490  .wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open) {
 491    color: inherit !important;
 492    background-color: inherit !important;
 493  }
 494  .wp-block-navigation__responsive-container.is-menu-open {
 495    display: flex;
 496    flex-direction: column;
 497    background-color: inherit;
 498  }
 499  @media not (prefers-reduced-motion) {
 500    .wp-block-navigation__responsive-container.is-menu-open {
 501      animation: overlay-menu__fade-in-animation 0.1s ease-out;
 502      animation-fill-mode: forwards;
 503    }
 504  }
 505  .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
 506    padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
 507    padding-left: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
 508    padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
 509    padding-right: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
 510  }
 511  .wp-block-navigation__responsive-container.is-menu-open {
 512    overflow: auto;
 513    z-index: 100000;
 514  }
 515  .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
 516    padding-top: calc(2rem + 24px);
 517  }
 518  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content {
 519    overflow: visible;
 520    display: flex;
 521    flex-direction: column;
 522    flex-wrap: nowrap;
 523    align-items: var(--navigation-layout-justification-setting, inherit);
 524  }
 525  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content,
 526  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list,
 527  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
 528    justify-content: flex-start;
 529  }
 530  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
 531    display: none;
 532  }
 533  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
 534    opacity: 1;
 535    visibility: visible;
 536    height: auto;
 537    width: auto;
 538    overflow: initial;
 539    min-width: 200px;
 540    position: static;
 541    border: none;
 542    padding-right: 2rem;
 543    padding-left: 2rem;
 544  }
 545  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container,
 546  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
 547    gap: inherit;
 548  }
 549  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
 550    padding-top: var(--wp--style--block-gap, 2em);
 551  }
 552  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
 553    padding: 0;
 554  }
 555  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
 556  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
 557  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-page-list {
 558    display: flex;
 559    flex-direction: column;
 560    align-items: var(--navigation-layout-justification-setting, initial);
 561  }
 562  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item .wp-block-navigation__submenu-container,
 563  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__container,
 564  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation-item,
 565  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-page-list {
 566    color: inherit !important;
 567    background: transparent !important;
 568  }
 569  .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
 570    left: auto;
 571    right: auto;
 572  }
 573  .wp-block-navigation__responsive-container.disable-default-overlay .wp-block-navigation__overlay-container {
 574    display: none;
 575    width: 100%;
 576  }
 577  .wp-block-navigation__responsive-container.disable-default-overlay .wp-block-navigation__responsive-close {
 578    max-width: none;
 579  }
 580  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content > *:not(.wp-block-navigation__overlay-container) {
 581    display: none;
 582  }
 583  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container {
 584    display: block;
 585  }
 586  .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__overlay-container .wp-block-navigation__submenu-container {
 587    left: auto;
 588    right: 0;
 589  }
 590  @media (min-width: 600px) {
 591    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
 592      display: block;
 593      width: 100%;
 594      position: relative;
 595      z-index: auto;
 596      background-color: inherit;
 597    }
 598    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
 599      display: none;
 600    }
 601    .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 {
 602      right: 0;
 603    }
 604  }
 605  
 606  .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
 607    background-color: #fff;
 608  }
 609  
 610  .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
 611    color: #000;
 612  }
 613  
 614  .wp-block-navigation__toggle_button_label {
 615    font-size: 1rem;
 616    font-weight: bold;
 617  }
 618  
 619  .wp-block-navigation__responsive-container-open,
 620  .wp-block-navigation__responsive-container-close {
 621    vertical-align: middle;
 622    cursor: pointer;
 623    color: currentColor;
 624    background: transparent;
 625    border: none;
 626    margin: 0;
 627    padding: 0;
 628    text-transform: inherit;
 629  }
 630  .wp-block-navigation__responsive-container-open svg,
 631  .wp-block-navigation__responsive-container-close svg {
 632    fill: currentColor;
 633    pointer-events: none;
 634    display: block;
 635    width: 24px;
 636    height: 24px;
 637  }
 638  
 639  .wp-block-navigation__responsive-container-open {
 640    display: flex;
 641  }
 642  .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
 643    font-family: inherit;
 644    font-weight: inherit;
 645    font-size: inherit;
 646  }
 647  @media (min-width: 600px) {
 648    .wp-block-navigation__responsive-container-open:not(.always-shown) {
 649      display: none;
 650    }
 651  }
 652  
 653  .wp-block-navigation__responsive-container-close {
 654    position: absolute;
 655    top: 0;
 656    left: 0;
 657    z-index: 2;
 658  }
 659  .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
 660    font-family: inherit;
 661    font-weight: inherit;
 662    font-size: inherit;
 663  }
 664  
 665  .disable-default-overlay .wp-block-navigation__responsive-container-close {
 666    top: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
 667    left: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
 668  }
 669  
 670  .wp-block-navigation__responsive-close {
 671    width: 100%;
 672  }
 673  .has-modal-open .wp-block-navigation__responsive-close {
 674    max-width: var(--wp--style--global--wide-size, 100%);
 675    margin-right: auto;
 676    margin-left: auto;
 677  }
 678  .wp-block-navigation__responsive-close:focus {
 679    outline: none;
 680  }
 681  
 682  .is-menu-open .wp-block-navigation__responsive-close,
 683  .is-menu-open .wp-block-navigation__responsive-dialog,
 684  .is-menu-open .wp-block-navigation__responsive-container-content {
 685    box-sizing: border-box;
 686  }
 687  
 688  .wp-block-navigation__responsive-dialog {
 689    position: relative;
 690  }
 691  
 692  .has-modal-open .admin-bar .is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-dialog {
 693    margin-top: 46px;
 694  }
 695  @media (min-width: 782px) {
 696    .has-modal-open .admin-bar .is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-dialog {
 697      margin-top: 32px;
 698    }
 699  }
 700  
 701  html.has-modal-open {
 702    overflow: hidden;
 703  }