/* Context menu, toasts, collaborator cursors */

.context-menu,
.context-menu-submenu {
  border: 1px solid var(--node-border);
  border-radius: var(--node-radius);
  padding: 8px;
  background: var(--node-bg);
  box-shadow: var(--node-volume), var(--node-shadow);
}

.context-menu {
  position: fixed;
  z-index: 30;
  display: grid;
  gap: 6px;
  min-width: 168px;
}

.context-menu[hidden] {
  display: none;
}

.context-menu-item {
  position: relative;
}

.context-menu-trigger,
.context-menu-action,
.context-menu-submenu button {
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--node-title);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: left;
  background: transparent;
}

.context-menu-trigger {
  padding: 9px 28px 9px 12px;
  cursor: default;
}

.context-menu-trigger::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 10px;
  color: var(--node-muted);
  font-size: 1rem;
  line-height: 1;
  transform: translateY(-50%);
}

.context-menu-item:hover > .context-menu-trigger,
.context-menu-item:focus-within > .context-menu-trigger,
.context-menu-submenu button:hover,
.context-menu-action:hover {
  border-color: var(--node-selected);
  color: var(--node-title);
  background: var(--node-selected-surface);
}

.context-menu-item:hover > .context-menu-trigger::after,
.context-menu-item:focus-within > .context-menu-trigger::after {
  color: var(--node-selected);
}

.context-menu-submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 6px);
  z-index: 1;
  display: none;
  gap: 6px;
  min-width: 150px;
}

.context-menu-item:hover > .context-menu-submenu,
.context-menu-item:focus-within > .context-menu-submenu {
  display: grid;
}

.context-menu-item.is-submenu-left > .context-menu-submenu {
  right: calc(100% + 6px);
  left: auto;
}

.context-menu-item.is-submenu-left > .context-menu-trigger {
  padding: 9px 12px 9px 28px;
}

.context-menu-item.is-submenu-left > .context-menu-trigger::after {
  content: "‹";
  right: auto;
  left: 10px;
}

.context-menu-submenu::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: 8px;
  height: 100%;
}

.context-menu-submenu .context-menu-item {
  position: relative;
}

.context-menu-submenu .context-menu-item > .context-menu-submenu {
  top: 0;
  left: calc(100% + 6px);
}

.context-menu-submenu .context-menu-item.is-submenu-left > .context-menu-submenu {
  right: calc(100% + 6px);
  left: auto;
}

.context-menu-action-danger:hover {
  border-color: rgb(255 121 121 / 70%);
  color: #ffd3d3;
  background: rgb(255 121 121 / 12%);
}

.app-toast-layer {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(92vw, 560px);
  padding-top: 18px;
  transform: translateX(-50%);
  pointer-events: none;
}

.toast-stack {
  width: max-content;
  max-width: min(92vw, 560px);
}

.toast {
  width: max-content;
  max-width: min(92vw, 560px);
  border-radius: 16px;
  padding: 12px 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 54px rgb(0 0 0 / 48%);
}

.toast-error {
  border: 2px solid #ff3030;
  background: rgb(88 12 12 / 94%);
}

.toast-success {
  border: 2px solid #2ecc71;
  background: rgb(12 72 38 / 94%);
}

.toast.is-visible {
  animation: toast-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.toast.is-leaving {
  animation: toast-leave 320ms cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

.toast-message {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
}

.toast-message-error {
  color: #ff4444;
}

.toast-message-success {
  color: #44ff88;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(calc(-100% - 24px));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(calc(-100% - 24px));
  }
}

.collaborator-cursors-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}

.collaborator-cursor {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: top left;
}

.collaborator-cursor-pointer {
  display: block;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 35%));
}

.collaborator-cursor-label {
  display: inline-block;
  margin-top: 2px;
  margin-left: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}