.fs-block-off-canvas-menu {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.fs-block-nav-overlay__popover {
  --bg-color: var(--fs-blocks-color-white);
  --color: var(--fs-blocks-color-foreground);
  --popover-width: 360px;

  .fs-nav {
    --fs-nav-font-size: var(--wp--preset--font-size--sm);
    --fs-nav-border-color: color-mix(in srgb, currentcolor 5%, transparent 0%);
    --fs-nav-item-padding-block: 1rem;
    --fs-nav-item-padding-inline: 0;
    --fs-nav-dropdown-toggle-size: 48px;
    --fs-nav-dropdown-toggle-icon-size: 1.25em;
  }

  &.is-left,
  &.is-right {
    font-size: var(--fs-blocks-font-size-base);

    .fs-block-nav-overlay__content {
      position: absolute;
      top: 0;
      width: var(--popover-width);
      max-width: calc(100vw - 60px);
      animation: fsOffCanvasMenuAnimation 0.25s;
    }
  }

  &.is-left .fs-block-nav-overlay__content {
    --transform-from: -100%;
    left: 0;
  }

  &.is-right .fs-block-nav-overlay__content {
    --transform-from: 100%;
    right: 0;
  }

  &.is-right .fs-block-popover__close {
    right: auto;
    left: 0.5em;
  }

  &.is-fullscreen {

    &::backdrop {
      display: none;
    }

    .fs-block-nav-overlay__content {
      inset: 0;
      animation: fsOffCanvasMenuFadeInAnimation 0.25s;
    }
  }

  .fs-nav.is-vertical {
    width: auto;
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
    margin-right: calc(var(--wp--style--root--padding-right) * -1);

    .fs-nav-item,
    .wp-block-navigation-item {

      &:not(:last-child) {
        border-bottom: 1px solid var(--fs-nav-border-color);
      }
    }

    .fs-nav-link,
    .wp-block-navigation-item__label {
      padding-inline-start: var(--wp--style--root--padding-left);
      padding-inline-end: var(--wp--style--root--padding-right);
    }

    .fs-nav-link:hover,
    .fs-nav-link:has(+ .fs-nav-toggle:hover) {
      background-color: var(--fs-blocks-color-muted);
    }

    .fs-menu-link,
    .fs-menu-title {
      padding-inline-start: var(--wp--style--root--padding-left);
      padding-inline-end: var(--wp--style--root--padding-right);
    }

    .fs-nav-submenu.is-panel {

      /* Mega menus: */
      &.alignfull {
        padding-block: 0;
        overflow: hidden;
      }
    }
  }

  .fs-nav.is-accordion {

    .fs-nav-item,
    .wp-block-navigation-item {
      transition: background-color var(--fs-nav-transition-duration);

      &.is-open {
        background-color: rgba(0, 0, 0, 0.05);
      }
    }

    /* Mega menus: */
    .fs-nav-submenu.alignfull {
      width: 100%;

      >.fs-nav-item {
        padding-inline: 0;
      }
    }
  }

  .fs-nav.is-slider {

    .fs-nav-submenu.is-panel {

      >.fs-block-mega-menu__item {
        padding-inline: 0;
      }
    }
  }

  .fs-block-tabs__nav {
    position: sticky;
    top: 0;
    display: flex;
    gap: 0;
    margin-left: calc(var(--wp--style--root--padding-left) * -1);
    margin-right: calc(var(--wp--style--root--padding-right) * -1);
    background-color: var(--fs-blocks-color-muted);
    z-index: 10;

    &:hover .fs-block-tabs__tab:not(:hover) {

      &::before {
        background-color: transparent;
      }
    }
  }

  .fs-block-mega-menu>.fs-nav-submenu {
    width: auto;
  }

  .fs-block-tabs__tab {
    position: relative;
    flex: 1;
    padding: 15px 10px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--wp--preset--font-size--sm);
    border-bottom: 1px solid var(--fs-nav-border-color);
    transition: background var(--fs-nav-transition-duration);

    &::before {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: transparent;
      transition: background-color var(--fs-nav-transition-duration);
    }

    &:hover,
    &[aria-selected="true"] {

      &::before {
        background-color: var(--fs-blocks-color-primary);
      }
    }

    &[aria-selected="true"] {
      background-color: rgba(0, 0, 0, 0.05);
    }
  }

  .fs-block-popover__content {
    position: absolute;
  }
}

.fs-block-nav-overlay__content {
  height: 100dvh;
  color: var(--color);
  background-color: var(--bg-color);
  overflow: hidden;
}

.fs-block-nav-overlay__viewport {
  position: absolute;
  inset: 0;
  transition-property: transform;
  transition-duration: var(--fs-nav-transition-duration);
  transform: translateX(calc(var(--fs-nav-depth, 0) * -100%));
  will-change: transform;
}

.fs-block-nav-overlay__container {
  display: flex;
  flex-direction: column;
  padding-top: var(--wp--preset--spacing--base);
  padding-bottom: var(--wp--preset--spacing--base);
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
  row-gap: var(--wp--preset--spacing--xs);
  height: 100dvh !important;
  overflow: visible;
  overflow-y: auto;
  overscroll-behavior: contain;

  >.alignfull {
    width: auto;
    min-width: 100%;
    max-width: none;
    padding-left: var(--wp--style--root--padding-left);
    padding-right: var(--wp--style--root--padding-right);
  }

  .fs-block-search .fs-block-search-form {
    padding-left: var(--wp--style--root--padding-left);
    padding-right: var(--wp--style--root--padding-right);
  }
}

@keyframes fsOffCanvasMenuAnimation {

  from {
    transform: translateX(var(--transform-from, 0%));
  }
}

@keyframes fsOffCanvasMenuFadeInAnimation {

  from {
    opacity: 0;
  }
}