.context-menu {
  position: absolute;
  z-index: 1;

  display: flex;
  flex-direction: column;
  gap: 4px;

  width: fit-content;
  padding: 8px 12px;

  background-color: var(--bg-primary);

  transition-property: opacity, visibility;
  transition-duration: 0.4s;

  border-radius: 12px;

  box-shadow: var(--shadow-secondary);

  @media screen and (max-width: 768px) {
    width: calc(100% - 2 * 16px);
    left: 16px !important;
  }
}

.context-menu__option {
  --fill: var(--text-primary);
  --stroke: var(--fill);

  width: 100%;
  padding: 8px 12px;

  display: flex;
  align-items: center;
  gap: 12px;

  background: transparent;

  span {
    color: var(--fill);
  }

  &:hover {
    --fill: var(--blue-100);
  }

  @media screen and (max-width: 768px) {
    justify-content: center;
  }
}
