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