.nested-menu {
  > [role="menubar"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;

    &[aria-busy="true"] {
      overflow-x: hidden;
    }

    [role="menuitem"][aria-current="false"] {
      background-color: unset;
      color: inherit;
      border-color: transparent;
    }
  }

  [role="menu"] {
    display: flex;
    flex-direction: column;

    width: size(12);
    border: none;
    padding: 0;
    box-shadow: unset;

    [role="menuitem"] {
      flex-shrink: 0;
      justify-content: space-between;
      padding: spacer(4);
      text-decoration: underline;
      white-space: normal;

      &:hover {
        @include bg-color(primary);
      }

      &[aria-haspopup="menu"] {
        display: flex;
        align-items: center;

        text-decoration: none;

        &::after {
          @extend %icon, .icon-outline-cheveron-right;
          margin-left: spacer(2);
          flex-shrink: 0;
        }
      }
    }

    img {
      margin-top: auto;
    }

    footer {
      position: sticky;
      bottom: 0;
      border-top: $border;
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 1fr;
      padding: spacer(4);
      gap: spacer(4);
      @include bg-color(filled);
    }
  }

  > button {
    @include bg-color(filled);
  }

  .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: z-index(modal);
    background-color: $backdrop-bg;

    .close {
      position: absolute;
      font-size: $big-icon-size;
      top: spacer(4);
      right: spacer(4);
    }

    > [role="menu"] {
      position: fixed;
      height: 100%;
      overflow-y: auto;

      width: size(20);
      max-width: calc(100vw - ($big-icon-size + 2 * spacer(4)));
      border-radius: unset;
    }
  }
}
