usage ::v-deep selector in vue 3

There is no clue how to use ::v-deep selector for nested classnames in documentation. For example
I can migrate this code block to vue 3 according to documentation
vue 2

::v-deep {
    .table-footer-container {
      display: none ;
    }
  }

vue 3

:deep(.table-footer-container) {
    display: none 
  }

But I have no idea how to migrate this

::v-deep {
      .v-select {
        .vs__dropdown-toggle {
          background: #fff;
          border-color: #ddd;
        }
        &.vs--open {
          .vs__dropdown-toggle {
            border-color: #ff6000;
          }
        }
      }
    }

It would be better if there was a part about it.

No file or test is named in the issue. Start by locating the Vue 3 scoped-CSS documentation and its existing :deep section; add guidance for nested selectors using the shown class and state structure. Done means the migration case is documented clearly and the documentation builds or renders successfully.