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