.context-menu-section {
  width: 225px;
  max-height: 100vh;
  transition-duration: 150ms;
  box-shadow: var(--primary-shadow);
  opacity: 0;
  background-color: var(--background-primary);
  border-radius: 0.25rem;
  position: fixed;
  z-index: 991;
  transform-origin: top left;
  transform: scale(0) translate(0px, 0.25rem);
  overflow-y: auto;
  overflow-x: hidden;
}

.context-menu-section .context-menu-container {
  display: flex;
  flex-direction: column;
  padding-top: 0.1rem;
  padding-bottom: 0.2rem;
  color: var(--text-primary);
}

.context-menu-section .context-menu-container .context-menu-item {
  font-size: 0.875rem;
  line-height: 1rem;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

.context-menu-section .context-menu-container .context-menu-item:hover {
  background-color: var(--accent-background-secondary);
}

.context-menu-section .context-menu-container .context-menu-item p {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-sub-menu-container {
  position: fixed;
  left: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  min-width: 15rem;
  background-color: var(--background-primary);
  box-shadow: var(--primary-shadow);
  display: none;
  z-index: 991;
}

.context-sub-menu-container .context-menu-item {
  font-size: 0.875rem;
  line-height: 1rem;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}

.context-sub-menu-container .context-menu-item:hover {
  background-color: var(--accent-background-secondary);
}

.context-menu-section .context-menu-container .background-hover {
  background-color: var(--accent-background-secondary);
}