:is(#extra-specificity-hack, [data-drupal-admin-styles]) {
  [data-has-safe-triangle] {
    --safe-triangle-cursor-y: 100px;
    --safe-triangle-cursor-x: 100px;
    --safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
    --safe-triangle-submenu-start-y: 5vh;
    --safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
    /* TODO: Replace with calculated value of popover content height. */
    --safe-triangle-submenu-end-y: 66vh;

    &:hover {
      [data-safe-triangle] {
        display: block;
      }
    }
  }

  [data-safe-triangle] {
    position: fixed;
    display: none;
    content: "";
    inset: 0;
    clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
  }
}
